x4js 2.0.14 → 2.0.17

package/src/components/keyboard/keyboard.ts

@@ -120,30 +120,24 @@ export class Keyboard extends HBox<KeyboardProps>
 
 		this.hide( );
 
-		/*
-        touchstart: (e) => {
-			console.log( 'touch start' );
-			//e.preventDefault( );
+		this.addDOMEvent( "mousedown", (e) => {
+			this.handleKey( e ); 	
+			e.preventDefault( );
 			e.stopPropagation( );
-			
-			this.last_ev = e;
-			clearInterval( this.autorepeat );
-			this.autorepeat = setInterval( () => {
-				this.handleKey( this.last_ev );
-			}, 250 );
-		},
-		touchend: ( e ) => {
-			console.log( 'touch end' );
-			clearInterval( this.autorepeat );
-			this.last_ev = null;
-		},
-		*/
+		});
 
-		this.addDOMEvent( "mousedown", (e) => {
+		// for rapid people
+		this.addDOMEvent( "dblclick", (e) => {
 			this.handleKey( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
+
+		// for slow people
+		this.addDOMEvent( "contextmenu", (e) => {
+			e.preventDefault( );
+			e.stopPropagation( );
+		});
     }
 
 	/**
@@ -285,20 +279,27 @@ export class Keyboard extends HBox<KeyboardProps>
         
         if( this.visible ) {
             if( this.input ) {
-                this.show( );
-                this._scrollIntoView( this.input );
-
 				const type = this.input.type;
-				const dtype = this.input.getAttribute( "data-type" );
 
-                if( type==='number' || dtype==='number' ) {
-                    this._switchMode( "number" )
+                if( type=='check' || type=="radio" ) {
+                    this.hide( );
+                    this.input = null;        
                 }
-				else if( type==='date' || dtype==='date' ) {
-					this._switchMode( "date");
-				}
                 else {
-                    this._switchMode( "lower" );
+                    this.show( );
+                    this._scrollIntoView( this.input );
+
+                    const dtype = this.input.getAttribute( "data-type" );
+
+                    if( type==='number' || dtype==='number' ) {
+                        this._switchMode( "number" )
+                    }
+                    else if( type==='date' || dtype==='date' ) {
+                        this._switchMode( "date");
+                    }
+                    else {
+                        this._switchMode( "lower" );
+                    }
                 }
             }
         }

package/src/components/menu/menu.ts

@@ -38,7 +38,7 @@ export interface MenuItem {
 	click?: DOMEventHandler;
 }
 
-type MenuElement = MenuItem | Component | string;
+export type MenuElement = MenuItem | Component | string;
 
 export interface MenuProps extends Omit<PopupProps,"content"> {
 	items: MenuElement[];
@@ -149,7 +149,7 @@ class CMenuItem extends Component {
 export class Menu extends Popup {
 	
 	constructor( props: MenuProps ) {
-		super( { ...props, autoClose: "menu", modal: false } );
+		super( { ...props, autoClose: "menu" } );
 
 		this.addClass( "x4vbox" );
 

package/src/components/popup/popup.module.scss

@@ -32,6 +32,12 @@
 	}
 }
 
+.x4popup.center {
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+
 ::backdrop,
 .x4modal-mask {
 	background-color: var( --modal-mask-background );

package/src/components/popup/popup.ts

@@ -129,11 +129,13 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	}
 
 	/**
-	 * 
+	 * s
 	 */
 
-	displayCenter( ) {
-		this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
+	displayCenter( center = true ) {
+		//this.displayNear( new Rect( window.innerWidth/2, window.innerHeight/2, 0, 0 ), "center middle" );
+		this.setClass( 'center', center );
+		this._do_show( );		// to compute size
 	}
 
 	/**

package/src/components/propgrid/progrid.module.scss

@@ -104,5 +104,9 @@
 			padding: 8px;
 			padding-left: 34px;
 		}
+
+		.cell:has(.x4button) {
+			padding: 4px 40px;
+		}
 	}
 }

package/src/components/propgrid/propgrid.ts

@@ -20,7 +20,7 @@ import { Component, ComponentProps, EvChange, EvFocus } from "../../core/compone
 import { HBox, VBox } from "../boxes/boxes"
 import { Input, InputProps } from "../input/input"
 import { ListItem } from "../listbox/listbox"
-import { SimpleText } from "../label/label"
+import { Label, SimpleText } from "../label/label"
 import { class_ns, isFunction } from '../../core/core_tools';
 import { Icon } from '../components.js'
 
@@ -32,7 +32,7 @@ type IValue = boolean | number | string;
 type IValueCB = ( name: string) => IValue;
 
 export interface PropertyValue {
-	type: 'boolean' | 'number' | 'string' | 'password' | 'options';
+	type: 'boolean' | 'number' | 'string' | 'password' | 'options' | 'label' | 'button';
 	title?: string;
 	desc?: string;
 	name?: string;
@@ -82,7 +82,7 @@ export class PropertyGrid extends VBox {
 	setItems( _grps: PropertyGroup[] ) {
 
 		this.groups = _grps;
-		this.groups.sort( (a,b) => {return a.title>b.title ? 1 : 0} );
+		//this.groups.sort( (a,b) => {return a.title>b.title ? 1 : 0} );
 
 		let items: Component[] = [];
 
@@ -145,6 +145,8 @@ export class PropertyGrid extends VBox {
 	
 	makePropertyRow( item: PropertyValue ) {
 
+		let use_hdr = true;
+
 		// If boolean create checkbox
 		let editor: Component;
 		let value = isFunction(item.value) ? item.value( item.name ) : item.value;
@@ -171,7 +173,6 @@ export class PropertyGrid extends VBox {
 				items: item.options,
 				name: item.name,
 				change: ( e: EvChange ) => {
-					debugger;
 					item.callback?.( item.name, e.value );
 				}
 			});
@@ -208,6 +209,22 @@ export class PropertyGrid extends VBox {
 				}
 			});
 		}
+		else if (item.type === 'label') {
+			editor = new Label({ 
+				id: item.name,
+				text: value as string, 
+			});
+		}
+		else if (item.type === 'button') {
+			use_hdr = false;
+			editor = new Button({ 
+				id: item.name,
+				label: value as string, 
+				click: ( ) => {
+					item.callback?.( item.name, '' );
+				}
+			});
+		}
 		else {
 			editor = new Input({ 
 				type: 'text', 
@@ -225,7 +242,7 @@ export class PropertyGrid extends VBox {
 		return new HBox({
 			cls: 'row',
 			content: [
-				new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }),
+				use_hdr ? new Component({ cls: 'cell hdr', content: item.title ?? item.name, tooltip: item.desc }) : null,
 				new Component({ cls: 'cell', tag: "label", attrs: { "labelFor": item.name }, content: editor })
 			]
 		});

package/src/components/sizers/sizer.ts

@@ -33,12 +33,13 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom";
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 /**
  * 
  */
 
+
 @class_ns( "x4" )
 export class CSizer extends Component<ComponentProps,CSizerEvent> {
 

package/src/components/tabs/tabs.ts

@@ -138,6 +138,7 @@ export class Tabs extends VBox<TabsProps> {
 
 	private _list: CTabList;
 	private _stack: StackBox;
+	private _current: string;
 
 	constructor( props: TabsProps ) {
 		super( props );
@@ -169,6 +170,7 @@ export class Tabs extends VBox<TabsProps> {
 	selectTab( name: string ) {
 		this._list.select( name );
 		this._stack.select( name );
+		this._current = name;
 	}
 
 	private _onclick( ev: TablistClickEvent ) {
@@ -183,6 +185,10 @@ export class Tabs extends VBox<TabsProps> {
 		return this._stack.getPage( name );
 	}
 
+	getCurTab( ) {
+		return this._current;
+	}
+
 	/**
 	 * 
 	 */

package/src/components/textedit/textedit.ts

@@ -14,12 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EventCallback } from '@core/core_events.js';
-import { Component, ComponentProps, EvChange, EvClick, EvFocus, makeUniqueComponentId } from '../../core/component';
+//import { EventCallback } from '@core/core_events.js';
+import { Component, makeUniqueComponentId } from '../../core/component';
 import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
-import { Input, TextInputProps } from "../input/input"
+import { DateProps, Input, InputProps, NumberProps, TextInputProps, TimeProps } from "../input/input"
 import { Label } from '../label/label';
 
 import "./textedit.module.scss";
@@ -30,12 +30,28 @@ import "./textedit.module.scss";
  * 
  */
 
-interface TextEditProps extends ComponentProps {
+type TextEditInputs = TextInputProps | NumberProps | DateProps | TimeProps;
+
+interface TextEditBase {
+	label: string | UnsafeHtml;
+	labelWidth?: number;
+	inputWidth?: number;		
+	inputId?: string;
+	inputGadgets?: Component[];
+	inputAttrs?: any;
+}
+
+type TextEditProps = TextEditInputs & TextEditBase;
+
+/*
+not enougth precise
+interface TextEditProps extends InputProps {
 	label: string | UnsafeHtml;
 	labelWidth?: number;
+	editWidth?: number;		
 	inputId?: string;
 
-	type?: "text" | "email" | "password" | "date" | "number";
+	type?: "text" | "email" | "password" | "date" | "number" | "time";
 	name?: string;
 	readonly?: boolean;
 	required?: boolean;
@@ -49,6 +65,7 @@ interface TextEditProps extends ComponentProps {
 	focus?: EventCallback<EvFocus>;
 	change?: EventCallback<EvChange>;
 }
+*/
 
 /**
  * 
@@ -71,26 +88,14 @@ export class TextEdit extends HBox {
 		}
 
 		const gadgets = props.inputGadgets ?? [];
+		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
 
 		this.setContent( [
-			new HBox( { id: "label", width: props.labelWidth, content: [
+			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [
 				new Label( { tag: "label", text: props.label, labelFor: props.inputId } ),
-			]}),
+			]}) : null,
 			new HBox( { id: "edit", content: [
-				this.input = new Input( { 
-					type: props.type ?? "text", 
-					readonly: props.readonly, 
-					value: props.value, 
-					name: props.name,
-					id: props.inputId, 
-					required: props.required, 
-					disabled: props.disabled, 
-					placeholder: props.placeholder,
-					autofocus: props.autofocus,
-					attrs: props.inputAttrs,
-					focus: props.focus,
-					change: props.change,
-				} ),
+				this.input = new Input( iprops ),
 				...gadgets,
 			]})
 		])

package/src/core/component.ts

@@ -25,6 +25,7 @@ interface RefType<T extends Component> {
 }
 
 type ComponentAttributes = Record<string,string|number|boolean>;
+type CreateComponentCallBack =  ( attrs: Record<string,string> ) => ComponentContent;
 
 const FRAGMENT = Symbol( "fragment" );
 const COMPONENT = Symbol( "component" );
@@ -43,7 +44,7 @@ const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
 function genClassNames( x: any ): string[] {
 	
-	let classes = [];
+	const classes = [];
 	let self = Object.getPrototypeOf(x);
 
 	if( self.constructor==Component ) {
@@ -52,7 +53,7 @@ function genClassNames( x: any ): string[] {
 
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
-		const clsns: string = self.constructor.hasOwnProperty(x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
+		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
 		classes.push( clsns+clsname.toLowerCase() );
 		self = Object.getPrototypeOf(self);
 	}
@@ -134,7 +135,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	readonly props: P;
 	protected readonly clsprefix: string;	// internal class name prefix (x4 internal)
 
-	#store: Map<string|Symbol,any>;
+	#store: Map<string|symbol,any>;
 
 	constructor( props: P ) {
 		super( );
@@ -303,9 +304,10 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	setClass( cls: string, set: boolean = true ) {
+	setClass( cls: string, set: boolean = true ) : this {
 		if( set ) this.addClass(cls);
 		else this.removeClass( cls );
+		return this;
 	}
 
 	// :: ATTRIBUTES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -314,10 +316,11 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * attributes
 	 */
 
-	setAttributes( attrs: ComponentAttributes ) {
+	setAttributes( attrs: ComponentAttributes ): this {
 		for( const name in attrs ) {
 			this.setAttribute( name, attrs[name] );
 		}
+		return this;
 	}
 
 	/**
@@ -373,7 +376,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * idem as setData but onot on dom, you can store anything 
 	 */
 
-	setInternalData( name: string|Symbol, value: any ): this {
+	setInternalData( name: string|symbol, value: any ): this {
 		if( !this.#store ) {
 			this.#store = new Map( );
 		}
@@ -382,7 +385,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return this;
 	}
 
-	getInternalData( name: string|Symbol ): any {
+	getInternalData( name: string|symbol ): any {
 		return this.#store?.get(name);
 	}
 
@@ -417,7 +420,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	protected mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
 		const p = props as any;
 		elements.forEach( n => {
-			if (p.hasOwnProperty(n) && p[n]) {
+			if (Object.prototype.hasOwnProperty.call(p,n) && p[n]) {
 				this.on( n, p[n] );
 			}
 		});
@@ -675,7 +678,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	getBoundingRect( ): IRect {
+	getBoundingRect( ): Rect {
 		const rc = this.dom.getBoundingClientRect( );
 		return new Rect( rc.x, rc.y, rc.width, rc.height );
 	}
@@ -843,7 +846,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	enumChildComponents( recursive: boolean ) {
 
-		let children: Component[] = [];
+		const children: Component[] = [];
 		
 		const nodes = this.enumChildNodes( recursive );
 		nodes.forEach( ( c: Node ) => {
@@ -861,7 +864,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	enumChildNodes( recursive: boolean ) {
-		let children: Node[] = Array.from( recursive ? this.dom.querySelectorAll( '*' ) : this.dom.children );
+		const children: Node[] = Array.from( recursive ? this.dom.querySelectorAll( '*' ) : this.dom.children );
 		return children;
 	}
 
@@ -880,7 +883,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * called by the compiler when a jsx element is seen
 	 */
 
-	static createElement( clsOrTag: string | ComponentConstructor | Symbol | Function, attrs: any, ...children: Component[] ): Component | Component[] {
+	static createElement( clsOrTag: string | ComponentConstructor | symbol | CreateComponentCallBack, attrs: any, ...children: Component[] ): Component | Component[] {
 
 		let comp: Component;
 
@@ -1036,15 +1039,6 @@ export interface EvContextMenu extends ComponentEvent {
 	uievent: UIEvent;	// UI event that fire this event
 }
 
-/**
- * Simple message
- */
-
-export interface EvMessage extends ComponentEvent {
-	readonly msg: string;
-	readonly params?: any;
-}
-
 /**
  * Drag/Drop event
  */

package/src/core/core_application.ts

@@ -62,6 +62,7 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		super( );
 
 		console.assert( main_app==null, "Application must be a singleton." );
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		main_app = this;
 	}
 
@@ -185,7 +186,7 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		// then we send them on websocket
 		
 		this.on( 'global', ( e: EvMessage ) => {
-			if( e.hasOwnProperty(socket_sent) ) {
+			if( Object.prototype.hasOwnProperty.call( e, socket_sent) ) {
 				return;
 			}
 

package/src/core/core_data.ts

@@ -77,7 +77,7 @@ const metaFields = Symbol( 'metaField' );
 function _getMetas( obj: object, create = true ) : MetaInfos {
 	
 	let ctor = obj.constructor as any;
-	let mfld = ctor.hasOwnProperty(metaFields) ? ctor[metaFields] : undefined;
+	let mfld = Object.prototype.hasOwnProperty.call(ctor,metaFields) ? ctor[metaFields] : undefined;
 	
 	if( mfld===undefined ) {
 		if( !create ) {
@@ -105,6 +105,7 @@ function _getMetas( obj: object, create = true ) : MetaInfos {
 	return mfld;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace data {
 
 	/**
@@ -297,7 +298,7 @@ export class DataModel {
 	 * @returns an object with known record values
 	 */
 
-	serialize( input: DataRecord ): any { 
+	serialize<T = any>( input: DataRecord ): T { 
 		let rec: any = {};
 
 		this.getFields().forEach((f) => {
@@ -306,8 +307,10 @@ export class DataModel {
 			}
 		});
 
-		return rec;
+		return rec as T;
 	}
+
+
 	
 	/**
 	 * default unserializer
@@ -454,11 +457,7 @@ export class DataModel {
  * 
  */
 
-
-
-const $model = Symbol( "model" )
-
-export class DataRecord  {
+export class DataRecord {
 	[ key: string ]: DataFieldValue;
 
 	/*
@@ -511,6 +510,8 @@ export class DataRecord  {
 		this.setRaw( fld.name, value );
 	}
 	*/
+
+	
 }
 
 

package/src/core/core_element.ts

@@ -84,6 +84,11 @@ export class CoreElement<E extends EventMap = EventMap> {
 		}
 		
 		this.#events.addListener( name, listener );
+		return {
+			off: ( ) => {
+				this.#events.removeListener( name, listener );
+			}
+		}
 	}
 
 	/**

package/src/core/core_i18n.ts

@@ -97,7 +97,7 @@ export function addTranslation( name: string, ...parts: any[] ) {
 
 function _patch( obj: any, by: any ) {
 
-	for( let n in by ) {
+	for( const n in by ) {
 		const src = by[n];
 		if( typeof src === "string" ) {
 			obj[n] = src;

package/src/core/core_router.ts

@@ -60,7 +60,7 @@ export function parseRoute(str: string | RegExp, loose = false): Segment {
 			const ext = tmp.indexOf('.', 1);
 
 			keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
-			pattern += o >= 0 && ext < 0 ? '(?:/([^\/]+?))?' : '/([^\/]+?)';
+			pattern += o >= 0 && ext < 0 ? '(?:/([^/]+?))?' : '/([^/]+?)';
 			if (ext >= 0) {
 				pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
 			}
@@ -72,7 +72,7 @@ export function parseRoute(str: string | RegExp, loose = false): Segment {
 
 	return {
 		keys,
-		pattern: new RegExp( `^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i' )
+		pattern: new RegExp( `^${pattern}${loose ? '(?=$|/)' : '/?$'}`, 'i' )
 	};
 }
 

package/src/core/core_state.ts

@@ -0,0 +1,62 @@
+/**
+* @file core_state.ts
+* @author Etienne Cochard 
+* @copyright (c) 2025 R-libre ingenierie, all rights reserved.
+**/
+
+
+type StateData = boolean | number | string | Date | any;
+type State = Record<string,StateData>;
+
+export class StateManager {
+	
+	private _state: StateData;
+	private _subscribers: Map<string,any>;
+	private _currentTracking: Set<string>;
+
+	constructor(initialState: StateData ) {
+		this._state = initialState ? { ...initialState } : {};
+		this._subscribers = new Map();
+		this._currentTracking = new Set( );
+	}
+
+	getState( path: string, defaultValue: StateData = null) {
+		// Optional tracking for reactivity
+		if (this._currentTracking) {
+			this._currentTracking.add(path);
+		}
+		// Fast path-based access
+		const parts = path.split('.');
+		let current = this._state;
+
+		for (const part of parts) {
+			if (current?.[part] === undefined) {
+				return defaultValue;
+			}
+
+			current = current[part];
+		}
+
+		return current;
+	}
+
+	setState(path: string, value: StateData, context: any = {} ) {
+		// Update state
+		const parts = path.split('.');
+		let current = this._state;
+
+		for (let i = 0; i < parts.length - 1; i++) {
+			const part = parts[i];
+			if (!current[part] || typeof current[part] !== 'object') {
+				current[part] = {};
+			}
+			
+			current = current[part];
+		}
+
+		current[parts[parts.length - 1]] = value;
+
+		// Notify subscribers
+		this._notifySubscribers(path, value);
+	}
+}

package/src/core/core_svg.ts

@@ -198,6 +198,7 @@ class SvgItem {
 	addClass( cls: string ): this {
 		if( !cls ) return;
 		
+		cls = cls.trim();
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
 			this._dom.classList.add(...ccs);

package/src/x4.ts

@@ -15,13 +15,17 @@
  **/
 
 export * from "./core/component"
+export * from "./core/core_application"
 export * from "./core/core_colors"
+export * from "./core/core_data"
 export * from "./core/core_dom"
 export * from "./core/core_dragdrop"
 export * from "./core/core_element"
 export * from "./core/core_events"
 export * from "./core/core_i18n"
+export * from "./core/core_react"
 export * from "./core/core_router"
+export * from "./core/core_state"
 export * from "./core/core_styles"
 export * from "./core/core_svg"
 export * from "./core/core_tools"