x4js 2.0.26 → 2.0.30

package/src/components/gridview/gridview.ts

@@ -16,7 +16,7 @@
 
 
 import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
-import { class_ns, isNumber, isString, setWaitCursor } from '../../core/core_tools';
+import { class_ns, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
 import { DataModel, DataStore, DataView, DataRecord, EvViewChange } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
@@ -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;
 
@@ -45,7 +45,7 @@ const SCROLL_LIMIT = 200;
 
 export interface GridColumn {
 	id: any;
-	title: string;
+	title: string | UnsafeHtml;
 	width: number;
 	fixed?: boolean;
 	flex?: number;
@@ -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( );

package/src/components/input/input.ts

@@ -20,75 +20,156 @@ import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString }
 
 import "./input.module.scss"
 
+
+function getRadioOwner( el: Element )  {
+
+	while( el!=document.body ) {
+		const comp = componentFromDOM(el);
+		const ifx = comp.queryInterface( "tab-handler");
+		if( ifx ) {
+			return el;
+		}
+
+		el = el.parentElement;
+	}
+
+	return document;
+}
+
+
+/**
+ * Base properties for all input types.
+ */
+
 export interface BaseProps extends ComponentProps {
+	/** 
+	 * Input field name. 
+	 * required if you want to use form getValues/setValues
+	 */
+
 	name?: string;
+	/** Automatically focus the input on page load. */
 	autofocus?: boolean;
+	/** Marks the input as required. */
 	required?: boolean;
+	/** Makes the input read-only. */
 	readonly?: boolean;
-	placeholder?: string;
-	
-	focus?: EventCallback<EvFocus>;
-	change?: EventCallback<EvChange>;
+	/** Placeholder text displayed when empty. */
+    placeholder?: string;
+	/** Fired when the input receives/loses focus. */
+    focus?: EventCallback<EvFocus>;
+	/** Fired when the input value changes. */
+    change?: EventCallback<EvChange>;
 }
 
+/**
+ * Checkbox-specific input properties.
+ */
+
 interface CheckboxProps extends BaseProps {
 	type: "checkbox";
+	/** Checkbox value (submitted when checked). */
 	value?: boolean | number | string;
+	/** Initial checked state. */
 	checked?: boolean;
 }
 
+/**
+ * Radio button-specific input properties.
+ */
+
 interface RadioProps extends BaseProps {
 	type: "radio";
+	/** Radio value (submitted when selected). */
 	value?: boolean | number | string;
+	/** Initial checked state. */
 	checked?: boolean;
 }
 
+/**
+ * Range slider input properties.
+ */
+
 export interface RangeProps extends BaseProps {
 	type: "range";
+	/** Current slider value. */
 	value?: number;
+	/** Minimum allowed value. */
 	min: number;
+	/** Maximum allowed value. */
 	max: number;
+	/** Step increment. */
 	step?: number;
 }
 
+/**
+ * File upload input properties.
+ */
 export interface FileProps extends BaseProps {
 	type: "file";
+	/** Allowed file types (e.g., `"image/*"` or `[".pdf", ".doc"]`). */
 	accept: string | string[];
 	value?: never;
 }
 
-
+/**
+ * Date picker input properties.
+ */
 export interface DateProps extends BaseProps {
 	type: "date";
-	value?: Date | string;
+	/** Current date value (Date object or ISO string). */
+    value?: Date | string;
 }
 
+/**
+ * Time picker input properties.
+ */
+
 export interface TimeProps extends BaseProps {
 	type: "time";
 	readonly?: boolean;
 	required?: boolean;
-	value?: string;
+	/** Current time value (e.g., `"12:30"`). */
+    value?: string;
 }
 
+/**
+ * Numeric input properties.
+ */
+
 export interface NumberProps extends BaseProps {
 	type: "number";
 	readonly?: boolean;
 	required?: boolean;
-	value?: number | string;
-	min?: number;
-	max?: number;
-	step?: number;
+	/** Current numeric value. */
+    value?: number | string;
+	/** Minimum allowed value. */
+    min?: number;
+	/** Maximum allowed value. */
+    max?: number;
+	/** Step increment. */
+    step?: number;
 }
 
+/**
+ * Text/email/password input properties.
+ */
+
 export interface TextInputProps extends BaseProps {
 	type?: "text" | "email" | "password";
 	readonly?: boolean;
 	required?: boolean;
+	/** Regex pattern for validation. */
 	pattern?: string;
+	/** Input value. */
 	value?: string | number;
+	/** Enables/disables spellcheck. */
 	spellcheck?: boolean;
+	/** Minimum input length. */
 	minlength?: number;
+	/** Maximum input length. */
 	maxlength?: number;
+	trim?: boolean;
 }
 
 
@@ -102,7 +183,21 @@ interface InputEvents extends ComponentEvent {
 
 
 /**
- * 
+ * Customizable input component supporting multiple types (text, number, date, etc.).
+ * Auto-generates CSS class: `x4input`.
+ *
+ * @example
+ * ```ts
+ * // Text input
+ * const nameInput = new Input({ type: "text", placeholder: "Enter name" });
+ *
+ * // Checkbox
+ * const agreeCheckbox = new Input({
+ *   type: "checkbox",
+ *   checked: true,
+ *   change: (e) => console.log("Checked:", e.value)
+ * });
+ * ```
  */
 
 @class_ns( "x4" )
@@ -262,27 +357,31 @@ export class Input extends Component<InputProps,InputEvents> {
 		}
 	}
 
-	/**
-	 * @returns 
-	 */
-
+	/** Gets the current input value as a string. */
+    
 	public getValue( ) {
-		return (this.dom as HTMLInputElement).value;
+		let v = (this.dom as HTMLInputElement).value;
+		if( (this.props as any).trim!==false ) {
+			v = v.trim( );	
+		}
+
+		return v;
 	}
 	
 	/**
-	 * 
-	 * @param value 
-	 */
+     * Sets the input value.
+     * @param value - New value (converted to string).
+     */
 	
 	public setValue( value: string ) {
 		(this.dom as HTMLInputElement).value = value+"";
 	}
 
 	/**
-	 * 
-	 * @returns 
-	 */
+     * Gets the numeric value (for `type="number"` or `type="range"`).
+     * @param defNan - Default value if parsing fails (default: `NaN`).
+     * @returns Parsed number or `defNan`.
+     */
 	
 	public getNumValue( defNan?: number ) {
 		const v = parseFloat( this.getValue() );
@@ -293,11 +392,13 @@ export class Input extends Component<InputProps,InputEvents> {
 	}
 
 	/**
-	 * 
-	 * @param value 
-	 * @param ndec number of decimals or -1 for auto, -2 as prop.step
-	 * 
-	 */
+     * Sets a numeric value with optional decimal precision.
+     * @param value - Numeric value to set.
+     * @param ndec - Decimal places:
+     *               `-1` = auto,
+     *               `-2` = use `step` prop,
+     *               `≥0` = fixed decimals.
+     */
 
 	public setNumValue( value: number, ndec = -1 ) {
 		
@@ -319,48 +420,38 @@ export class Input extends Component<InputProps,InputEvents> {
 		this.setValue( value+"" );
 	}
 
-	/**
-	 * @return the checked value
-	 */
-
-	public getCheck() {
+	/** Gets the checked state (for checkboxes/radio buttons). */
+    public getCheck() {
 		const d = this.dom as HTMLInputElement;
 		return d.checked;
 	}
 
-	/**
-	 * change the checked value
-	 * @param {boolean} ck new checked value	
-	 */
-
+	/** Sets the checked state (for checkboxes/radio buttons). */
+    
 	public setCheck(ck: boolean) {
 		const d = this.dom as HTMLInputElement;
 		d.checked = ck;
 	}
 
-	/**
-	 * 
-	 */
-
+	/** Toggles read-only mode. */
+    
 	public setReadOnly( ro: boolean ) {
 		const d = this.dom as HTMLInputElement;
 		d.readOnly = ro;
 	}
 
-	/**
-	 * select all the text
-	 */
-
+	/** Selects all text in the input. */
+    
 	public selectAll( ) {
 		const d = this.dom as HTMLInputElement;
         d.select(); 
 	}
 
 	/**
-	 * select a part of the text
-	 * @param start 
-	 * @param length 
-	 */
+     * Selects a text range.
+     * @param start - Start position 
+     * @param length - Length of selection
+     */
 
 	public select( start: number, length: number = 9999 ) : void {
 		const d = this.dom as HTMLInputElement;
@@ -368,9 +459,9 @@ export class Input extends Component<InputProps,InputEvents> {
 	}
 
 	/**
-	 * get the selection as { start, length }
-	 */
-
+     * Gets the current text selection.
+     * @returns Object with `start` and `length` properties.
+     */
 	public getSelection( ) {
 		const d = this.dom as HTMLInputElement;
 
@@ -380,10 +471,8 @@ export class Input extends Component<InputProps,InputEvents> {
 		};
 	}
 
-	/**
-	 * 
-	 */
-
+	/** Validates the input (checks `required` constraint). */
+    
 	public isValid( ) {
 
 		if( (this.props as any).required ) {
@@ -412,8 +501,12 @@ export class Input extends Component<InputProps,InputEvents> {
 						const checked = owner.querySelector( `input[name="${this.props.name}"]:checked` )
 						return checked ? (checked as HTMLInputElement).value : undefined;
 					}
-
-					return this.getValue(); 
+					else if( this.props.type=='number' ) {
+						return this.getNumValue( 0 );
+					}
+					else {
+						return this.getValue(); 
+					}
 				},
 				setRawValue: ( v: any ) => { 
 					if( this.props.type=='checkbox' ) {
@@ -424,6 +517,9 @@ export class Input extends Component<InputProps,InputEvents> {
 							this.setCheck( true ) ;
 						}
 					}
+					else if( this.props.type=='number' ) {
+						return this.setNumValue( v, -2 );
+					}
 					else {
 						this.setValue(v); 
 					}
@@ -439,20 +535,3 @@ export class Input extends Component<InputProps,InputEvents> {
 	}
 }
 
-
-function getRadioOwner( el: Element )  {
-
-	while( el!=document.body ) {
-		const comp = componentFromDOM(el);
-		const ifx = comp.queryInterface( "tab-handler");
-		if( ifx ) {
-			return el;
-		}
-
-		el = el.parentElement;
-	}
-
-	return document;
-}
-
-

package/src/components/keyboard/keyboard.module.scss

@@ -23,7 +23,7 @@
 .x4keyboard {
 	z-index: 2000;
     position: absolute !important;
-    width: 100vw;
+    width: 100%;
 	bottom: 0;
 	justify-content: center;