x4js 2.0.28 → 2.0.31

package/src/components/button/button.ts

@@ -28,6 +28,11 @@ import "./button.module.scss";
  */
 
 interface ButtonEvents extends ComponentEvents {
+	/** 
+	 * Fired when the button is clicked 
+	 * ex: myButton.on( "click", ( e: EvClick ) => { console.log( "click") } );
+	 */
+
 	click: EvClick;
 }
 
@@ -36,29 +41,62 @@ interface ButtonEvents extends ComponentEvents {
  */
 
 export interface ButtonProps extends ComponentProps {
-	label?: string;
+	/** Text or HTML content of the button */
+	label?: string | UnsafeHtml;	
+
+	/** Icon identifier to display */
 	icon?: string;
+
+	/** 
+	 * Tab index for keyboard navigation.
+	 * - `false` to exclude from tab order
+	 * - `number` to set specific tab index
+	 */
 	tabindex?: boolean | number;
+	
+	/** 
+	 * Enable auto-repeat behavior when button is held down.
+	 * - `true` uses default 200ms repeat interval
+	 * - `number` specifies custom repeat interval in milliseconds
+	 * 
+	 * First click triggers after 500ms, then repeats at specified interval.
+	 */
 	autorepeat?: number | boolean;
+
+	/**
+	 * Callback function invoked when button is clicked 
+	 * cf. ButtonEvents
+	 */
 	click?: EventCallback<EvClick>;
 }
 
 /**
- * Button component.
+ * Represents a clickable button component.
+ * 
+ * Generates the CSS class **x4button** based on the class name.
+ * The button can contain an optional icon and label, supports keyboard activation,
+ * and may trigger auto-repeated click events while pointer is held down.
+ * 
  */
 
+
 @class_ns( "x4" )
 export class Button extends Component<ButtonProps,ButtonEvents> {
 
 	#text: Component;
 
 	/**
-     * Creates an instance of Button.
-     * 
-     * @param props - The properties for the button component, including label and icon.
-     * @example
-     * const button = new Button({ label: 'Submit', icon: 'check-icon' });
-     */
+	 * Create a new Button.
+	 *
+	 * @param {ButtonProps} props - Configuration options such as `label`, `icon`, `tabindex`, `autorepeat`, and `click`.
+	 *
+	 * @example
+	 * const btn = new Button({
+	 *   label: "Save",
+	 *   icon: "check",
+	 *   click: () => console.log("clicked"),
+	 * });
+	 */
 
 	constructor( props: ButtonProps ) {
 		super( { ...props, tag: 'button', content: null } );
@@ -88,7 +126,7 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 	}
 
 	/**
-	 * called by the system on click event
+	 * @internal 
 	 */
 
 	protected _on_click( ev: MouseEvent ) {
@@ -109,6 +147,10 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 		ev.stopPropagation();
 	}
 
+	/**
+	 * @internal
+	 */
+
 	protected _on_mouse( e: PointerEvent ) {
 
 		let count = 0;
@@ -119,11 +161,10 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 			const rt = this.props.autorepeat===true ? 200 : this.props.autorepeat as number;
 
 			this.setTimeout( 'repeat', 500, ( ) => {
-				count++;
-
-				this.fire('click', {} );
+				this.fire( "click", {} );
 				this.setInterval( 'repeat', rt, ( ) => {
-					this.fire('click', {} );
+					count++;
+					this.fire( "click", {repeat:count} );
 				})
 			} );
 		}
@@ -131,13 +172,16 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 			this.clearTimeout( 'repeat' );
 
 			if( !count ) {
-				this.fire('click', {} );
+				this.fire("click", {} );
 			}
 		}
 	}
 
 	/**
-	 * simulate a click
+	 * Activate the button as if it was clicked by a user.
+	 *
+	 * @example
+	 * button.click();
 	 */
 
 	click( ) {
@@ -145,7 +189,7 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 	}
 
 	/**
-	 * called on key down
+	 * @internal
 	 */
 
 	protected _on_keydown( e: KeyboardEvent ) {
@@ -156,13 +200,15 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 	}
 
 	/**
-     * Sets the text content of the button's label.
-     * 
-     * @param text - The new text or HTML content for the label.
-     * @example
-     * button.setText('Click Me');
-     * button.setText(new UnsafeHtml('<b>Bold Text</b>'));
-     */
+	 * Set or change the button label.
+	 *
+	 * @param {string | UnsafeHtml} text - Text content or unsafe HTML.
+	 *
+	 * @example
+	 * button.setText("Confirm");
+	 * button.setText(new UnsafeHtml("<strong>OK</strong>"));
+	 * button.setText( unsafe`<strong>OK</strong>` );
+	 */
 
 	public setText( text: string | UnsafeHtml ) {
 		this.#text.setContent( text );
@@ -170,12 +216,13 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 	}
 	
 	/**
-     * Sets the icon of the button.
-     * 
-     * @param icon - The new icon ID to set on the button.
-     * @example
-     * button.setIcon('new-icon-id');
-     */
+	 * Set or change the icon displayed by the button.
+	 *
+	 * @param {string} icon - Icon identifier to associate with the button.
+	 *
+	 * @example
+	 * button.setIcon("arrow-right");
+	 */
 
 	public setIcon( icon: string ) {
 		this.query<Icon>( "#icon" ).setIcon( icon );

package/src/components/combobox/combobox.ts

@@ -52,7 +52,6 @@ export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 		this.setContent( this._list );
 
 		this.addDOMEvent( "mousedown", ( ev: Event ) => { 
-			console.log( "trap" );
 			ev.stopImmediatePropagation( );
 			ev.stopPropagation( );
 			ev.preventDefault( );
@@ -228,6 +227,7 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		const rc = this._edit.getBoundingRect( );
 		this._popup.setStyleValue( "minWidth", rc.width+"px" );
 		this._popup.displayNear( rc, "top left", "bottom left", {x:0,y:6} );
+		this._popup.getList().ensureSelectionVisible( );
 	}
 
 	setItems( items: ListItem[] ) {

package/src/components/dialog/dialog.ts

@@ -183,6 +183,10 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 		return this.form.getValues();
 	}
 
+	validate( ) {
+		return this.form.validate( );
+	}
+
 	/**
 	 * 
 	 */

package/src/components/gridview/gridview.ts

@@ -34,7 +34,7 @@ import "./gridview.module.scss"
 export type CellRenderer = (rec: DataRecord) => Component;
 export type CellClassifier = (data: any, rec: DataRecord, col: string ) => string;	// return the cell computed class
 
-type ColType = "number" | "money" | "checkbox" | "date" | "string" | "image" | "percent" | "icon";
+type ColType = "number" | "money" | "checkbox" | "date" | "string" | "image" | "percent" | "icon" | "date-time";
 
 const SCROLL_LIMIT = 200;
 
@@ -121,9 +121,12 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	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', {});
+
+	// 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;
@@ -345,6 +348,68 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		}
 	}
 
+	setColumns( columns: GridColumn[] ) {
+		this._columns = columns.map(x => x);
+		if( this.dom ) {
+			
+			this._updateFlexs( );
+			
+			// Rebuild headers
+			if (this._fheader) {
+				/*
+				const newFixedHeader = this._buildColHeader(true);
+				this._fheader.setContent(newFixedHeader.getChildren());
+				// On doit remplacer _fheader dans le DOM ou mettre à jour son contenu
+				// La méthode _buildColHeader retourne une Box.
+				// Ici, je vais simplifier en vidant et remplissant si possible, 
+				// mais Box n'a pas forcément de méthode simple pour remplacer tout le DOM interne sans casser les events.
+				// Le plus simple est de remplacer les composants header dans le DOM global du gridview.
+				
+				// Approche : on recrée les headers et on remplace les anciens
+				this._fheader.destroy();
+				this._hheader.destroy();
+				
+				this._fheader = this._buildColHeader(true);
+				this._hheader = this._buildColHeader(false);
+				
+				// Il faut réinsérer ces headers au bon endroit dans le DOM du Gridview.
+				// _init fait: 
+				// 		this.setContent([
+				//			this._fheader,
+				//			this._hheader,
+				//			this._vheader,
+				//			this._viewport,
+				//			this._ffooter,
+				//			this._footer,
+				//		]);
+				
+				// Donc on peut reconstruire le content complet
+				const content = [
+					this._fheader,
+					this._hheader,
+					this._vheader,
+					this._viewport
+				];
+				
+				if (this._has_footer) {
+					this._ffooter.destroy();
+					this._footer.destroy();
+					this._ffooter = this._buildColFooter(true);
+					this._footer = this._buildColFooter(false);
+					content.push(this._ffooter);
+					content.push(this._footer);
+				}
+				
+				this.setContent(content);
+				*/
+				console.assert( false, "TODO" );
+			}
+
+			this._computeFullSize( );
+			this._update( true );
+		}
+	}
+
 	getView( ): DataView {
 		return this._dataview;
 	}
@@ -417,7 +482,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 				attrs: { "data-col": col },
 				style: { width: cdata.width ? cdata.width + "px" : undefined },
 				content: [
-					new SimpleText({ text: cdata.title, align: cdata.header_align ?? "left" }),
+					new SimpleText({ cls: 'title', text: cdata.title, align: cdata.header_align ?? "left" }),
 					new Component({ cls: "sorter" }),
 					sizer
 				]
@@ -642,10 +707,23 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			}
 
 			case "date": {
+				if( isString(data) ) {
+					data = new Date( data );
+				}
+				
 				data = this._dte_fmt.format(data as Date);
 				break;
 			}
 
+			case "date-time": {
+				if( isString(data) ) {
+					data = new Date( data );
+				}
+				
+				data = this._dtetme_fmt.format(data as Date);
+				break;
+			}
+
 			default: {
 				data = data + "";
 				break;
@@ -1111,6 +1189,10 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 * 
 	 */
 
+	clearSelection( ) {
+		this._clearSelection( );
+	}
+
 	private _clearSelection() {
 		for (const ref of this._selection.keys()) {
 			const els = this.queryAll(`.row[data-row="${ref}"]`)
@@ -1168,10 +1250,26 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 * 
 	 */
 
-	selectItem( id: any ) {
+	selectItem( id: any, ensureVisible = true ) {
 		const index = this._dataview.indexOfId( id );
 		if( index>=0 ) {
 			this._addSelection( index );
+			if( ensureVisible ) {
+				this._scrollToIndex( index );
+			}
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	setColTitle( col_name: any, title: string ) {
+		const col = this._columns.findIndex( x => x.id==col_name );
+		if( col>=0 ) {
+			this._columns[col].title = title;
+			const el = this._hheader.query<SimpleText>(`[data-col="${col}"] .title` )
+			el.setText( title );
 		}
 	}
 }

package/src/components/icon/icon.ts

@@ -14,8 +14,8 @@
  * 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 { class_ns } from '../../core/core_tools.ts';
+import { Component, ComponentProps } from '../../core/component.ts';
 
 import "./icon.module.scss"
 
@@ -68,20 +68,44 @@ class SvgLoader {
 export const svgLoader = new SvgLoader( );
 
 /**
- * 
+ * Icon component properties.
+ *
+ * @property {string} [iconId] - Identifier or path of the icon to display.
  */
 
 export interface IconProps extends ComponentProps {
+	/**
+     * Identifier for the icon.
+     * Can be a URL, a CSS variable (prefixed with `var:`), or inline SVG data.
+     * @example
+     * // Using a CSS variable
+     * { iconId: "var:home" }
+     * @example
+     * // Using an imported SVG
+     * import myicon from "./myicon.svg";
+     * { iconId: myicon }
+     */
 	iconId?: string;
 }
 
 /**
- * 
+ * A component for rendering icons.
+ * Supports inline SVG, external SVG files, and CSS variables for icon paths.
+ * The CSS class for this component is automatically generated as `x4icon`.
  */
 
 @class_ns( "x4" )
 export class Icon extends Component<IconProps> {
 
+	/**
+	 * Create a new Icon.
+	 *
+	 * @param {IconProps} props - Optional initial icon identifier.
+	 *
+	 * @example
+	 * const icon = new Icon({ iconId: "check" });
+	 */
+
 	constructor( props: IconProps ) {
 		super( props );
 
@@ -89,16 +113,20 @@ export class Icon extends Component<IconProps> {
 	}
 
 	/**
-	 * change the icon content
-	 * @param iconId if name is starting with var: then we use css variable name a path
-	 * @example
-	 * 
-	 * setIcon( "var:home" )
-	 * 
-	 * import myicon from "./myicon.svg"
-	 * setIcon( myicon );
-	 * 
-	 */
+     * Sets or updates the icon content.
+     * @param iconId - Identifier for the icon.
+     *                 If it starts with `var:`, the value is treated as a CSS variable name.
+     *                 If it is a data URL (e.g., `data:image/svg+xml,<svg...`), the SVG is rendered directly.
+     *                 If it ends with `.svg`, the file is loaded asynchronously.
+     *                 Otherwise, it is treated as an image URL.
+     * @example
+     * // Using a CSS variable
+     * setIcon("var:home");
+     * @example
+     * // Using an imported SVG
+     * import myicon from "./myicon.svg";
+     * setIcon(myicon);
+     */
 
 	setIcon( iconId: string ) {
 		this.clearContent( );