x4js 2.3.25 → 2.3.27

package/src/components/spreadsheet/spreadsheet.ts

@@ -18,7 +18,7 @@
 import { Component, ComponentContent, ComponentEvent, ComponentEvents, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { GridColumn } from '../gridview/gridview'
 
-import { class_ns, IFormElement, isFunction, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
+import { formatDate, formatMoney, formatNumber, IFormElement, isFunction, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
 import { CoreEvent, EventCallback, EventMap } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -282,8 +282,8 @@ export interface SpreadsheetProps extends ComponentProps {
  * ```
  */
 
-@class_ns("x4")
 export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extends SpreadsheetEvents = SpreadsheetEvents> extends Component<P, E> {
+	static classPrefix = "x4";
 
 	private _columns: SpreadsheetColumn[];
 	private _store: Store;
@@ -310,9 +310,6 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 	private _end: number;
 
 	private _selection: Set<number>;
-	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 _has_fixed: boolean;
 	private _has_footer: boolean;
@@ -821,12 +818,13 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			})
 
 			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();
@@ -990,7 +988,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					return "NaN";
 				}
 
-				data = this._num_fmt.format(data as number);
+				data = formatNumber(data as number);
 				break;
 			}
 
@@ -999,7 +997,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 					return "NaN";
 				}
 
-				data = this._mny_fmt.format(data as number);
+				data = formatMoney(data as number);
 				break;
 			}
 
@@ -1015,7 +1013,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			}
 
 			case "date": {
-				data = this._dte_fmt.format(data as Date);
+				data = formatDate(data as Date);
 				break;
 			}
 

package/src/components/switch/switch.ts

@@ -22,7 +22,6 @@ import { Label } from '../label/label';
 import { HBox } from '../boxes/boxes';
 
 import "./switch.module.scss";
-import { class_ns } from '../../core/core_tools';
 
 interface SwitchProps extends ComponentProps {
 	label: string;
@@ -43,8 +42,9 @@ interface SwitchProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Switch extends HBox<SwitchProps> {
+	static classPrefix = "x4";
+
 	constructor(props: SwitchProps ) {
 		super( props );
 

package/src/components/tabs/tabs.ts

@@ -20,7 +20,6 @@ import { Button, ButtonProps } from '../button/button';
 import { HBox, VBox, StackBox, Box } from '../boxes/boxes';
 
 import "./tabs.module.scss"
-import { class_ns } from '../../core/core_tools';
 
 /**
  * 
@@ -40,8 +39,9 @@ export interface TabItem {
  * 
  */
 
-@class_ns( "x4" )
 class CTab extends Button {
+	static classPrefix = "x4";
+
 	constructor( props: ButtonProps, item: TabItem ) {
 		super( props );
 
@@ -78,8 +78,8 @@ interface TablistEvents extends ComponentEvents {
  * @internal
  */
 
-@class_ns( "x4" )
 class CTabList extends HBox<TablistProps,TablistEvents> {
+	static classPrefix = "x4";
 
 	private _selitem: Button;
 	
@@ -152,8 +152,8 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * ```
  */
 
-@class_ns( "x4" )
 export class Tabs extends Box<TabsProps> {
+	static classPrefix = "x4";
 
 	private _list: CTabList;
 	private _stack: StackBox;

package/src/components/tag/tag.ts

@@ -16,7 +16,7 @@
 
 
 import { ComponentProps } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 import { HBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
 import { SimpleText } from '../label/label';
@@ -40,8 +40,8 @@ export interface TagProps extends ComponentProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class Tag extends HBox<TagProps> {
+	static classPrefix = "x4";
 
 	constructor( props: TagProps ) {
 		super( props );

package/src/components/textarea/textarea.ts

@@ -23,7 +23,7 @@ import { Label } from '../label/label';
 import { VBox } from '../boxes/boxes';
 
 import "./textarea.module.scss";
-import { class_ns, IFormElement } from '../../core/core_tools';
+import { IFormElement } from '../../core/core_tools';
 
 /**
  * 
@@ -50,8 +50,8 @@ export interface TextAreaEvents extends ComponentEvents {
  *
  */
 
-@class_ns( "x4" )
 export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents> {
+	static classPrefix = "x4";
 
 	constructor( props: SimpleTextAreaProps ) {
 		super( { ...props, tag: "textarea" } );
@@ -142,8 +142,8 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * ```
  */
 
-@class_ns( "x4" )
 export class TextArea extends VBox {
+	static classPrefix = "x4";
 	
 	private _input: SimpleTextArea;
 

package/src/components/textedit/textedit.ts

@@ -16,7 +16,7 @@
 
 //import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, makeUniqueComponentId } from '../../core/component';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { UnsafeHtml } from '../../core/core_tools';
 
 import { BoxProps, HBox } from '../boxes/boxes';
 import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
@@ -81,8 +81,8 @@ interface TextEditProps extends InputProps {
  * ```
  */
 
-@class_ns( "x4" )
 export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<BoxProps,E> {
+	static classPrefix = "x4";
 
 	private input: Input;
 

package/src/components/themes.scss

@@ -92,9 +92,11 @@ $color--interval: 8.4%;
 	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
+	--alert-background-light: color-mix(in srgb, var(--alert-background) 15%, transparent);		// the red at 15%
 	--alert-color: #ffffff;
 
 	--warning-background: var(--color-warning-a50);
+	--warning-background-light: color-mix(in srgb, var(--warning-background) 15%, transparent);	// the orange at 15%
 	--warning-color: #ffffff;
 
 	--success-background: var(--color-success-a50);

package/src/components/tickline/tickline.ts

@@ -3,7 +3,7 @@ import { Color } from '../../core/core_colors';
 import { Component, ComponentProps } from '../../core/component';
 
 import "./tickline.module.scss"
-import { class_ns } from '../../core/core_tools';
+import { formatNumber } from '../../core/core_tools';
 
 export interface TickLineProps extends ComponentProps {
 	values: number[];
@@ -31,8 +31,8 @@ export interface TickLineProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class TickLine extends Component<TickLineProps> {
+	static classPrefix = "x4";
 	
 	constructor( props: TickLineProps ) {
 		super( props );
@@ -102,7 +102,7 @@ export class TickLine extends Component<TickLineProps> {
                     .antiAlias( false );
 
                 if( props.display?.tooltips ) {
-                    r.setAttr( 'tooltip', vals[x].toFixed(1) )
+                    r.setAttr( 'tooltip', formatNumber( vals[x], 1 ) )
                 }
 			}
 		}

package/src/components/timeline/timeline.module.scss

@@ -0,0 +1,147 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file timeline.module.scss
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+:root {
+	--timeline-done-color: var( --accent-background );
+	--timeline-done-icon-color: var( --accent-color );
+	--timeline-todo-color: var( --border );
+	--timeline-todo-icon-color: var( --text-ternary );
+	--timeline-title-color: var( --text-primary );
+	--timeline-text-color: var( --text-ternary );
+	--timeline-time-color: var( --text-primary );
+}
+
+// side by side: the marks on a line at the top, the content under each one
+
+.x4timeline {
+	display: flex;
+	flex-direction: row;
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		flex: 1 1 0;
+		min-width: 0;
+	}
+
+	.rail {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.mark {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 24px;
+		height: 24px;
+		border-radius: 50%;
+		background-color: var( --timeline-todo-color );
+
+		.x4icon {
+			height: 12px;
+			color: var( --timeline-todo-icon-color );
+			fill: var( --timeline-todo-icon-color );
+
+			&.empty {
+				display: none;
+			}
+		}
+	}
+
+	// the line to the next mark: only one side has a width
+	.line {
+		flex: 1;
+		border: 0 dashed var( --timeline-todo-color );
+		border-top-width: 2px;
+	}
+
+	.item.done > .rail {
+		.mark {
+			background-color: var( --timeline-done-color );
+
+			.x4icon {
+				color: var( --timeline-done-icon-color );
+				fill: var( --timeline-done-icon-color );
+			}
+		}
+
+		.line {
+			border-style: solid;
+		}
+	}
+
+	.item.next-done > .rail > .line {
+		border-color: var( --timeline-done-color );
+	}
+
+	.item:last-child > .rail > .line {
+		display: none;
+	}
+
+	.content {
+		padding: 8px 12px 0 0;
+	}
+
+	.title {
+		font-weight: bold;
+		color: var( --timeline-title-color );
+	}
+
+	.text {
+		color: var( --timeline-text-color );
+	}
+
+	.time {
+		margin-top: 4px;
+		font-size: 0.85em;
+		font-weight: 500;
+		color: var( --timeline-time-color );
+	}
+
+	// one under the other: the marks on a line on the left, the content beside each one
+
+	&.vertical {
+		flex-direction: column;
+
+		.item {
+			flex-direction: row;
+			flex: 0 0 auto;
+		}
+
+		.rail {
+			flex-direction: column;
+		}
+
+		.line {
+			border-top-width: 0;
+			border-left-width: 2px;
+		}
+
+		.content {
+			flex: 1;
+			min-width: 0;
+			padding: 0 0 1.5em 12px;
+		}
+
+		// the title on the middle of the mark
+		.title {
+			line-height: 24px;
+		}
+	}
+}

package/src/components/timeline/timeline.ts

@@ -0,0 +1,146 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file timeline.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Component, ComponentEvents, ComponentProps, EvClick } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { UnsafeHtml } from '../../core/core_tools';
+import { getCurrentLocale } from '../../core/core_i18n';
+import { Icon } from '../icon/icon';
+
+import "./timeline.module.scss";
+
+export interface TimelineItem {
+	icon?: string;					// in the round mark
+	title: string | UnsafeHtml;		// in bold
+	text?: string | UnsafeHtml;		// the sentence under it
+	date?: Date;					// written relative to now, in the locale: "2 hours ago"; none: no time shown
+	done?: boolean;					// the mark filled in the accent; else a grey mark
+}
+
+export interface TimelineEvents extends ComponentEvents {
+	click: EvClick;					// context: the TimelineItem clicked
+}
+
+export interface TimelineProps extends ComponentProps {
+	items?: TimelineItem[];
+	vertical?: boolean;				// true by default; false: the events side by side
+	renderer?: ( item: TimelineItem ) => Component;	// what is beside the mark
+	click?: EventCallback<EvClick>;
+}
+
+/**
+ * "2 hours ago", "yesterday", "in 3 days": the largest unit that gives at least 1
+ */
+
+function relativeTime( date: Date ): string {
+	const fmt = new Intl.RelativeTimeFormat( getCurrentLocale( ), { numeric: "auto" } );
+	const sec = ( date.getTime( ) - Date.now( ) ) / 1000;		// < 0: in the past
+	const abs = Math.abs( sec );
+
+	if( abs < 60 ) {
+		return fmt.format( Math.trunc( sec ), "second" );
+	}
+
+	if( abs < 3600 ) {
+		return fmt.format( Math.trunc( sec / 60 ), "minute" );
+	}
+
+	if( abs < 86400 ) {
+		return fmt.format( Math.trunc( sec / 3600 ), "hour" );
+	}
+
+	if( abs < 86400 * 30 ) {
+		return fmt.format( Math.trunc( sec / 86400 ), "day" );
+	}
+
+	if( abs < 86400 * 365 ) {
+		return fmt.format( Math.trunc( sec / ( 86400 * 30 ) ), "month" );
+	}
+
+	return fmt.format( Math.trunc( sec / ( 86400 * 365 ) ), "year" );
+}
+
+/**
+ * Events one after the other on a line, each with its icon in a round mark.
+ * The line from a mark to the next one is in the accent when the next event is done,
+ * dashed when the event it leaves is not done.
+ *
+ * @cssvar
+ * ```
+ * --timeline-done-color
+ * --timeline-done-icon-color
+ * --timeline-todo-color
+ * --timeline-todo-icon-color
+ * --timeline-title-color
+ * --timeline-text-color
+ * --timeline-time-color
+ * ```
+ */
+
+export class Timeline extends Component<TimelineProps, TimelineEvents> {
+	static classPrefix = "x4";
+
+	constructor( props: TimelineProps ) {
+		super( props );
+
+		this.setClass( "vertical", props.vertical ?? true );
+
+		this.mapPropEvents( props, "click" );
+		this.addDOMEvent( "click", ( ev ) => this._onClick( ev ) );
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	setItems( items: TimelineItem[] ) {
+		const renderer = this.props.renderer;
+
+		const content = items.map( ( item, i ) => {
+			const body = renderer ? renderer( item ) : [
+				new Component( { cls: "title", content: item.title } ),
+				item.text ? new Component( { cls: "text", content: item.text } ) : null,
+				item.date ? new Component( { cls: "time", content: relativeTime( item.date ) } ) : null,
+			];
+
+			const el = new Component( { cls: "item", content: [
+				new Component( { cls: "rail", content: [
+					new Component( { cls: "mark", content: new Icon( { iconId: item.icon } ) } ),
+					new Component( { cls: "line" } ),
+				] } ),
+				new Component( { cls: "content", content: body } ),
+			] } );
+
+			el.setClass( "done", !!item.done );
+			el.setClass( "next-done", i + 1 < items.length && !!items[i + 1].done );
+			el.setInternalData( "item", item );
+			return el;
+		} );
+
+		this.setContent( content );
+	}
+
+	/**
+	 * a click anywhere in an event: its item
+	 */
+
+	private _onClick( ev: MouseEvent ) {
+		const el = Component.closest( ev.target as Element, ".x4timeline > .item" );
+		if( el ) {
+			this.fire( "click", { context: el.getInternalData( "item" ) } );
+		}
+	}
+}

package/src/components/tooltips/tooltips.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, wrapDOM } from '../../core/component';
-import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
+import { ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Popup, PopupProps } from '../popup/popup';
@@ -117,8 +117,8 @@ function closeTT( ) {
  * ```
  */
 
-@class_ns( "x4" )
 class Tooltip extends Popup {
+	static classPrefix = "x4";
 
 	constructor( props: PopupProps ) {
 		super( props );

package/src/components/treeview/treeview.ts

@@ -14,9 +14,9 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { asap, class_ns } from '../../core/core_tools';
+import { asap } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange } from '../../core/component';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label, SimpleText } from '../label/label';
@@ -84,8 +84,8 @@ export interface TreeviewEvents extends ComponentEvents {
  * ```
  */
 
-@class_ns( "x4" )
 class CTreeViewItem extends Box {
+	static classPrefix = "x4";
 
 	private _item: TreeItem;
 	private _label: Component;
@@ -187,8 +187,8 @@ class CTreeViewItem extends Box {
  * 
  */
 
-@class_ns( "x4" )
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+	static classPrefix = "x4";
 
 	private _view: Viewport;
 	private _selection: ListboxID;
@@ -244,30 +244,24 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	}
 
 	private _on_click( ev: UIEvent ) {
-		let target = ev.target as HTMLElement;
-		
-		while( target && target!=this.dom ) {
-			const c = componentFromDOM( target );
-			
-			if( c && c.hasClass("item") ) {
-				const id = c.getInternalData( "id" );
-
-				const fev: ComponentEvent = { context:id };
-				if (ev.type == 'click') {
-					this.fire('click', fev );
-				}
-				else {
-					this.fire('dblClick', fev );
-				}
-
-				if (!fev.defaultPrevented) {
-					this._selectItem( id, c );
-				}
+		// an item of this tree, not of a component around it
+		const c = Component.closest( ev.target as Element, ".item" );
+		if( c && this.contains( c ) ) {
+			const id = c.getInternalData( "id" );
+
+			const fev: ComponentEvent = { context:id };
+			if (ev.type == 'click') {
+				this.fire('click', fev );
+			}
+			else {
+				this.fire('dblClick', fev );
+			}
 
-				return;
+			if (!fev.defaultPrevented) {
+				this._selectItem( id, c );
 			}
 
-			target = target.parentElement;
+			return;
 		}
 
 		this.clearSelection( );

package/src/components/video/video.ts

@@ -15,7 +15,6 @@
  **/
 
 import { Component, ComponentProps } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
 import { Box } from '../boxes/boxes';
 
 import "./video.module.scss"
@@ -31,8 +30,8 @@ interface VideoProps extends ComponentProps {
  * 
  */
 
-@class_ns( "x4" )
 export class Video extends Box {
+	static classPrefix = "x4";
 	
 	private _vplayer: HTMLVideoElement;
 

package/src/components/viewport/viewport.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 "./viewport.module.scss"
@@ -24,8 +23,9 @@ import { Box, BoxProps } from '../components';
  * 
  */
 
-@class_ns( "x4" )
 export class Viewport extends Component {
+	static classPrefix = "x4";
+
 	constructor( props: ComponentProps ) {
 		super( props );
 	}
@@ -35,8 +35,9 @@ export class Viewport extends Component {
  * 
  */
 
-@class_ns( "x4" )
 export class ScrollView extends Box {
+	static classPrefix = "x4";
+
 	constructor( props: BoxProps ) {
 		super( props );
 		this.setContent( new Viewport( {} ) );