x4js 2.3.10 → 2.3.12

package/src/components/autocomplete/autocomplete.ts

@@ -0,0 +1,361 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file autocomplete.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, ComponentEvent, ComponentEvents, EvChange } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { class_ns, kbNav } from '../../core/core_tools';
+
+import { HBox } from '../boxes/boxes';
+import { DropdownList } from '../combobox/combobox';
+import { TextInputProps } from '../input/input';
+import { SimpleText } from '../label/label';
+import { ListboxID, ListItem } from '../listbox/listbox';
+import { TextEdit, TextEditBase } from '../textedit/textedit';
+
+import "./autocomplete.module.scss"
+
+/**
+ * fired when suggestions are needed for a text
+ * setItems can be called later (async), late answers are ignored
+ */
+
+export interface EvSearch extends ComponentEvent {
+	text: string;
+	setItems: ( items: ListItem[] ) => void;
+}
+
+/**
+ * fired when the value is validated
+ */
+
+export interface EvAutoCompleteChange extends EvChange {
+	item: ListItem;		// picked item, null for a free text
+}
+
+interface AutoCompleteEvents extends ComponentEvents {
+	search: EvSearch;
+	change: EvAutoCompleteChange;
+}
+
+export interface AutoCompleteProps extends Omit<TextInputProps,"type"|"change">, TextEditBase {
+	search: EventCallback<EvSearch>;
+	change?: EventCallback<EvAutoCompleteChange>;
+
+	/** only a picked item (or nothing) is accepted, default false: free text is kept */
+	strict?: boolean;
+
+	/** what is written in the field when an item is picked (default "text") */
+	itemValue?: "text" | "id";
+
+	/** delay between the last key and the search, in ms (default 250) */
+	delay?: number;
+
+	/** number of chars needed to start a search (default 1) */
+	minChars?: number;
+
+	/** custom renderer for the suggestions */
+	renderer?: ( item: ListItem ) => Component;
+}
+
+// suggestion as: id + text
+const render_id_item = ( item: ListItem ) => {
+	return new HBox( {
+		cls: item.cls,
+		content: [
+			new SimpleText( { cls: "id", text: item.id+"" } ),
+			new SimpleText( { cls: "text", text: item.text } ),
+		]
+	});
+}
+
+/**
+ * Text field with suggestions asked on demand (search event).
+ *
+ * @example
+ * new AutoComplete( {
+ *   label: "Customer",
+ *   strict: true,
+ *   search: async ( ev ) => {
+ *     const rows = await api.searchCustomers( ev.text );
+ *     ev.setItems( rows.map( r => ( { id: r.id, text: r.name } ) ) );
+ *   },
+ *   change: ( ev ) => console.log( ev.value, ev.item ),
+ * })
+ */
+
+@class_ns( "x4" )
+export class AutoComplete extends TextEdit<AutoCompleteEvents> {
+
+	private _popup: DropdownList;
+
+	private _strict: boolean;
+	private _by_id: boolean;
+	private _delay: number;
+	private _min_chars: number;
+
+	private _text: string;		// last validated text
+	private _item: ListItem;	// last picked item (null: free text)
+	private _seq: number;		// search sequence, to ignore late answers
+	private _count: number;		// number of suggestions
+
+	constructor( props: AutoCompleteProps ) {
+		// the change of the input (each key) starts the search, our change event is fired on validation
+		super( { ...props, type: "text", change: ( ) => this._on_input( ) } );
+
+		this._strict = !!props.strict;
+		this._by_id = props.itemValue=="id";
+		this._delay = props.delay ?? 250;
+		this._min_chars = props.minChars ?? 1;
+
+		this._text = this.getInput( ).getValue( );
+		this._item = null;
+		this._seq = 0;
+		this._count = 0;
+
+		this.mapPropEvents( props, 'change', 'search' );
+
+		this._popup = new DropdownList( {
+			cls: "autocomplete",
+			items: [],
+			renderer: props.renderer ?? ( this._by_id ? render_id_item : undefined )
+		} );
+
+		this._popup.on( "click", ( ev ) => {
+			const item = this._popup.getList( ).getItem( ev.context as ListboxID );
+			if( item ) {
+				this._pick( item );
+			}
+		});
+
+		this.getInput( ).addDOMEvent( "keydown", ( ev ) => this._on_key( ev ) );
+
+		this.addDOMEvent( "focusout", ( ev ) => this._on_focusout( ev ) );
+	}
+
+	/**
+	 *
+	 */
+
+	private _on_input( ) {
+		const text = this.getInput( ).getValue( );
+
+		// pending answers are obsolete
+		this._seq++;
+
+		if( text.length<this._min_chars ) {
+			this.clearTimeout( "search" );
+			this._popup.show( false );
+			return;
+		}
+
+		this.setTimeout( "search", this._delay, ( ) => this._search( text ) );
+	}
+
+	/**
+	 *
+	 */
+
+	private _search( text: string ) {
+		const seq = ++this._seq;
+
+		const setItems = ( items: ListItem[] ) => {
+			// a newer search was started (or the field was left)
+			if( seq!=this._seq ) {
+				return;
+			}
+
+			this._setItems( items ?? [] );
+		}
+
+		this.fire( "search", { text, setItems } );
+	}
+
+	private _setItems( items: ListItem[] ) {
+		const list = this._popup.getList( );
+		list.setItems( items );
+		this._count = items.length;
+
+		if( !items.length ) {
+			this._popup.show( false );
+			return;
+		}
+
+		this.showDropDown( );
+
+		// strict: Enter picks the first suggestion
+		if( this._strict ) {
+			list.navigate( kbNav.first );
+		}
+	}
+
+	/**
+	 *
+	 */
+
+	private _on_key( ev: KeyboardEvent ) {
+		const list = this._popup.getList( );
+		const open = this._popup.isOpen( );
+
+		switch( ev.key ) {
+			case "ArrowUp":
+			case "ArrowDown": {
+				if( open ) {
+					list.navigate( ev.key=="ArrowDown" ? kbNav.next : kbNav.prev );
+				}
+				else if( this._count ) {
+					this.showDropDown( );
+				}
+				else {
+					this.clearTimeout( "search" );
+					this._search( this.getInput( ).getValue( ) );
+				}
+
+				break;
+			}
+
+			case "Enter": {
+				const [sel] = open ? list.getSelection( ) : [];
+				const item = sel!==undefined ? list.getItem( sel ) : null;
+
+				if( !item ) {
+					// nothing to pick: the key is not for us
+					this._popup.show( false );
+					return;
+				}
+
+				this._pick( item );
+				break;
+			}
+
+			case "Escape": {
+				if( !open ) {
+					return;
+				}
+
+				this._popup.show( false );
+				break;
+			}
+
+			default: {
+				return;
+			}
+		}
+
+		ev.preventDefault( );
+		ev.stopPropagation( );
+	}
+
+	/**
+	 *
+	 */
+
+	private _on_focusout( ev: FocusEvent ) {
+		// focus is moving inside the control
+		const to = ev.relatedTarget as Node;
+		if( to && this.dom.contains( to ) ) {
+			return;
+		}
+
+		this.clearTimeout( "search" );
+		this._seq++;
+		this._popup.show( false );
+
+		const input = this.getInput( );
+		const text = input.getValue( );
+		if( text===this._text ) {
+			return;
+		}
+
+		// strict: back to the last validated value (but the field can be emptied)
+		if( this._strict && text!=="" ) {
+			input.setValue( this._text );
+			return;
+		}
+
+		this._commit( text, null );
+	}
+
+	/**
+	 * an item was choosen in the suggestions
+	 */
+
+	private _pick( item: ListItem ) {
+		const text = ( this._by_id ? item.id : item.text ) + "";
+
+		this.clearTimeout( "search" );
+		this._seq++;
+
+		this.getInput( ).setValue( text );
+		this._popup.show( false );
+
+		this._commit( text, item );
+	}
+
+	private _commit( text: string, item: ListItem ) {
+		const changed = text!==this._text || item?.id!==this._item?.id;
+
+		this._text = text;
+		this._item = item;
+
+		if( changed ) {
+			this.fire( "change", { value: text, item } );
+		}
+	}
+
+	/**
+	 *
+	 */
+
+	showDropDown( ) {
+		if( this.isDisabled() || this._popup.isOpen( ) ) {
+			return;
+		}
+
+		const rc = ( this.query( ":scope > #edit" ) ?? this ).getBoundingRect( );
+		this._popup.setStyleValue( "minWidth", rc.width+"px" );
+		this._popup.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+	}
+
+	/**
+	 * change the text of the field (no item is selected, no event)
+	 */
+
+	override setValue( value: string ) {
+		super.setValue( value );
+
+		this._text = this.getInput( ).getValue( );
+		this._item = null;
+	}
+
+	/**
+	 * select an item as if it was picked in the suggestions (no event)
+	 */
+
+	setSelection( item: ListItem ) {
+		super.setValue( ( this._by_id ? item.id : item.text ) + "" );
+
+		this._text = this.getInput( ).getValue( );
+		this._item = item;
+	}
+
+	/**
+	 * @returns the id of the picked item, undefined if the text does not come from the suggestions
+	 */
+
+	getSelection( ): ListboxID {
+		return this.getInput( ).getValue( )===this._text ? this._item?.id : undefined;
+	}
+}

package/src/components/boxes/boxes.ts

@@ -17,6 +17,7 @@
 import { asap, class_ns, isArray, isNumber } from '../../core/core_tools';
 import { Component, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
 import { EventCallback } from '../../core/core_events';
+import { HSizer, VSizer } from '../sizers/sizer';
 
 import "./boxes.module.scss";
 
@@ -91,6 +92,71 @@ export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=Componen
 }
 
 
+// :: SPLITBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export interface SplitBoxProps extends Omit<BoxProps,"content"> {
+	/** Panels to lay out, a sizer is inserted between each of them. */
+	content: Component[];
+}
+
+/**
+ * insert a sizer between each panel.
+ * the sizer resizes the panel that is not flex (the flex one takes the remaining space),
+ * when both are of the same kind, the previous panel is resized.
+ */
+
+function split_content( panels: Component[], horz: boolean ) {
+	const els = panels?.filter( x => !!x ) ?? [];
+	const res: Component[] = [];
+
+	els.forEach( ( p, i ) => {
+		if( i>0 ) {
+			const prev = els[i-1];
+			const next = prev.hasClass( "x4flex" ) && !p.hasClass( "x4flex" );
+			res.push( horz ? new HSizer( next ) : new VSizer( next ) );
+		}
+
+		res.push( p );
+	});
+
+	return res;
+}
+
+/**
+ * A horizontal box where panels are separated by sizers: panels are side by side
+ * (like in a {@link HBox}) and the user can change their width.
+ * The CSS class for this component is automatically generated as `x4hsplitbox`.
+ *
+ * @example
+ * new HSplitBox( {
+ *   content: [
+ *     new Treeview( { width: 250, ... } ),		// resized by the sizer
+ *     new Panel( { flex: 1, ... } ),			// takes the remaining space
+ *   ]
+ * })
+ */
+
+@class_ns( "x4" )
+export class HSplitBox<P extends SplitBoxProps=SplitBoxProps,E extends ComponentEvents=ComponentEvents> extends HBox<P,E> {
+	constructor( props: P ) {
+		super( { ...props, content: split_content( props.content, true ) } );
+	}
+}
+
+/**
+ * A vertical box where panels are separated by sizers: panels are stacked
+ * (like in a {@link VBox}) and the user can change their height.
+ * The CSS class for this component is automatically generated as `x4vsplitbox`.
+ */
+
+@class_ns( "x4" )
+export class VSplitBox<P extends SplitBoxProps=SplitBoxProps,E extends ComponentEvents=ComponentEvents> extends VBox<P,E> {
+	constructor( props: P ) {
+		super( { ...props, content: split_content( props.content, false ) } );
+	}
+}
+
+
 type ContentBuilder = ( ) => Component;
 
 

package/src/components/button/button.ts

@@ -14,12 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Menu, MenuElement, MenuProps } from 'x4js';
 import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
 import { EventCallback } from '../../core/core_events';
 import { class_ns, isFunction, UnsafeHtml } from '../../core/core_tools';
 
 import { Icon } from "../icon/icon"
+import { Menu, MenuElement } from '../menu/menu';
 
 import "./button.module.scss";
 

package/src/components/chart/chart.module.scss

@@ -0,0 +1,126 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file chart.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 {
+	--chart-background: white;
+	--chart-text: #52514e;
+	--chart-grid: #e6e5e0;
+	--chart-axis: #b5b4ae;
+
+	// series colors, used in this order
+	--chart-color-1: #2a78d6;
+	--chart-color-2: #eb6834;
+	--chart-color-3: #1baf7a;
+	--chart-color-4: #eda100;
+	--chart-color-5: #e87ba4;
+	--chart-color-6: #008300;
+	--chart-color-7: #4a3aa7;
+	--chart-color-8: #e34948;
+}
+
+.x4chart {
+	display: block;
+	background-color: var( --chart-background );
+
+	text {
+		font-size: 10px;
+		fill: var( --chart-text );
+		user-select: none;
+
+		&.name {
+			font-weight: 500;
+		}
+	}
+
+	.grid,
+	.base {
+		fill: none;
+		stroke-width: 1px;
+		shape-rendering: crispEdges;
+	}
+
+	.grid {
+		stroke: var( --chart-grid );
+	}
+
+	.base {
+		stroke: var( --chart-axis );
+	}
+
+	// --chart-c is the color of the element (palette slot, or serie.color)
+	@for $i from 1 through 8 {
+		.c#{$i} {
+			--chart-c: var( --chart-color-#{$i} );
+		}
+	}
+
+	.mark,
+	.bar,
+	.slice {
+		fill: var( --chart-c );
+	}
+
+	.slice {
+		stroke: var( --chart-background );
+		stroke-width: 2px;
+		stroke-linejoin: round;
+	}
+
+	.ring {
+		fill: none;
+		stroke: var( --chart-c );
+	}
+
+	.line {
+		fill: none;
+		stroke: var( --chart-c );
+		stroke-width: 2px;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+	}
+
+	.area {
+		fill: var( --chart-c );
+		fill-opacity: 0.15;
+		stroke: none;
+	}
+
+	.dot {
+		fill: var( --chart-c );
+		stroke: var( --chart-background );
+		stroke-width: 2px;
+	}
+
+	.bar,
+	.slice,
+	.ring,
+	.dot {
+		transition: opacity 0.15s ease;
+
+		&:hover {
+			opacity: 0.75;
+		}
+	}
+
+	// hover point of a line without dots
+	.dot.ghost {
+		opacity: 0;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+}