x4js 2.3.17 → 2.3.19

package/src/components/textarea/textarea.ts

@@ -17,7 +17,7 @@
  **/
 
 import { BaseProps } from '../input/input';
-import { Component, ComponentProps } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, EvChange, EvFocus } from '../../core/component';
 
 import { Label } from '../label/label';
 import { VBox } from '../boxes/boxes';
@@ -29,37 +29,64 @@ import { class_ns, IFormElement } from '../../core/core_tools';
  * 
  */
 
-interface TextAreaProps extends BaseProps {
-	label?: string;
+export interface SimpleTextAreaProps extends BaseProps {
 	value?: string;
 	resize?: boolean | "none" | "vertical" | "horizontal" | "both";
 	readonly?: boolean;
 	trim?: boolean;
 }
 
+export interface TextAreaProps extends SimpleTextAreaProps {
+	label?: string;
+}
+
+export interface TextAreaEvents extends ComponentEvents {
+	focus: EvFocus;
+	change: EvChange;
+}
+
 
 /**
- * 
+ *
  */
 
 @class_ns( "x4" )
-export class SimpleTextArea extends Component<TextAreaProps> {
+export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents> {
 
-	constructor( props: TextAreaProps ) {
+	constructor( props: SimpleTextAreaProps ) {
 		super( { ...props, tag: "textarea" } );
 
+		this.mapPropEvents( props, "focus", "change" );
+
 		this.setAttribute( "name", props.name );
 		if( props.value ) {
 			this.setText( props.value+'' );
 		}
 
+		// none by default (the stylesheet); true: "both", false: "none"
 		if( props.resize!==undefined ) {
-			this.setStyleValue( "resize", props.resize===false ? "none" : props.resize as string );
+			this.setStyleValue( "resize", props.resize===true ? "both" : props.resize===false ? "none" : props.resize );
 		}
 
 		if( props.readonly ) {
 			this.setAttribute( "readonly", true );
 		}
+
+		if( props.placeholder ) {
+			this.setAttribute( "placeholder", props.placeholder );
+		}
+
+		if( props.required ) {
+			this.setAttribute( "required", true );
+		}
+
+		if( props.autofocus ) {
+			this.setAttribute( "autofocus", true );
+		}
+
+		this.addDOMEvent( "blur", ( ) => this.fire( "focus", { focus_out: true } ) );
+		this.addDOMEvent( "focus", ( ) => this.fire( "focus", { focus_out: false } ) );
+		this.addDOMEvent( "input", ( ) => this.fire( "change", { value: this.getText( ) } ) );
 	}
 
 	setText( text: string ) {
@@ -79,12 +106,18 @@ export class SimpleTextArea extends Component<TextAreaProps> {
 		this.dom.scrollTop = this.dom.scrollHeight;
 	}
 
+	/** false when it is required and empty */
+
+	isValid( ) {
+		return !this.props.required || this.getText( )!=="";
+	}
+
 	queryInterface<T>(name: string): T {
 		if( name=="form-element" ) {
 			const i: IFormElement = {
 				getRawValue: ( ): any => { return this.getText(); },
 				setRawValue: ( v: any ) => { this.setText( v ); },
-				isValid: ( ) => { return true; }
+				isValid: ( ) => { return this.isValid( ); }
 			};
 
 			return i as unknown as T;
@@ -115,11 +148,11 @@ export class TextArea extends VBox {
 		super( props );
 
 
-		const { label, value, resize, readonly, trim, name } = props;
+		const { value, resize, readonly, trim, name, placeholder, required, autofocus, focus, change } = props;
 
 		this.setContent( [
 			new Label( { text: props.label }),
-			this._input = new SimpleTextArea( { label,value,resize,readonly,trim,name } )
+			this._input = new SimpleTextArea( { value,resize,readonly,trim,name,placeholder,required,autofocus,focus,change } )
 		])
 	}
 
@@ -135,12 +168,18 @@ export class TextArea extends VBox {
 		this._input.scrollToBottom( );
 	}
 
+	/** false when it is required and empty */
+
+	isValid( ) {
+		return this._input.isValid( );
+	}
+
 	queryInterface<T>(name: string): T {
 		if( name=="form-element" ) {
 			const i: IFormElement = {
 				getRawValue: ( ): any => { return this.getText(); },
 				setRawValue: ( v: any ) => { this.setText( v ); },
-				isValid: ( ) => { return true; }
+				isValid: ( ) => { return this.isValid( ); }
 			};
 
 			return i as unknown as T;

package/src/components/textedit/textedit.ts

@@ -87,7 +87,9 @@ export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<
 	private input: Input;
 
 	constructor( props: TextEditProps ) {
-		super( props );
+		// dom_events are for the input (focus, blur, keydown...): not on the box too,
+		// where keydown would run a second time, and focus never (it does not bubble)
+		super( { ...props, dom_events: undefined } );
 
 		if( !props.inputId ) {
 			props.inputId = makeUniqueComponentId()
@@ -104,8 +106,16 @@ export class TextEdit<E extends ComponentEvents = ComponentEvents> extends HBox<
 
 
 		const iprops: InputProps = { ...props, id: props.inputId, attrs: props.inputAttrs, width: props.inputWidth };
-		// no propagation...
+
+		// the props of the box stay on it: given to the input too, a style would be put
+		// twice, a tooltip twice, the height of the box on the field...
 		delete iprops.cls;
+		delete iprops.style;
+		delete iprops.tooltip;
+		delete iprops.hidden;
+		delete iprops.flex;
+		delete iprops.stretch;
+		delete iprops.height;
 
 		this.setContent( [
 			props.label ? new HBox( { id: "label", width: props.labelWidth, content: [

package/src/core/component.ts

@@ -234,7 +234,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				this.setStyle( props.style );
 			}
 
-			if( props.content ) {
+			if( props.content || props.content===0 ) {
 				this.setContent( props.content );
 			}
 
@@ -321,7 +321,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 			}
 		
 		if( cls.indexOf(' ')>=0 ) {
-			const ccs = cls.split( " " );
+			const ccs = cls.split( " " ).filter( x => x );
 			this.dom.classList.remove(...ccs);
 			}
 			else {
@@ -358,7 +358,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		}
 
 		if( cls.indexOf(' ')>=0 ) {
-			const ccs = cls.split( " " );
+			const ccs = cls.split( " " ).filter( x => x );
 			ccs.forEach( toggle );
 				}
 				else {
@@ -897,7 +897,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	/**
      * Enables or disables the component.
-     * This sets the `disabled` attribute and also propagates the disabled state to child input elements.
+     * This sets or removes the `disabled` and `inert` attributes of the component itself. Its children
+     * are not changed: the browser makes all that is inside an `inert` element inactive.
      * @param ena - If `true`, the component is enabled; if `false`, it's disabled. Defaults to `true`.
      * @returns The component instance for chaining.
      */
@@ -1195,8 +1196,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		if( !this.#shortcuts ) {
 			const shortcuts = this.#shortcuts = new Shortcuts( );
 
-			// straight on the element, not with addDOMEvent: the handlers of the
-			// children are called exactly as before
+			// straight on the element, not with addDOMEvent: it does not change
+			// how the handlers of the children are called
 			this.dom.addEventListener( "keydown", ( ev ) => shortcuts.handle( ev as KeyboardEvent ) );
 			this.dom.addEventListener( "focusin", ( ) => Application.instance( ).setActiveShortcuts( this, shortcuts ) );
 		}
@@ -1230,11 +1231,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 		const state = makeState( raw );
 
-		// the state is what is saved, not raw: makeState works on a copy of it
+		// the state is what is saved, not raw: makeState works on a copy of it.
+		// The write waits for the changes to stop. Its timer is the one of the
+		// browser, not this.setTimeout: the timers of a component are cleared
+		// when it leaves the DOM, and what changed just before must still be written
+		let timer: ReturnType<typeof setTimeout>;
+
 		state.on( "change", ( ) => {
-			this.setTimeout( key, 500, ( ) => {
+			clearTimeout( timer );
+			timer = setTimeout( ( ) => {
 				Application.instance().setStorage( key, JSON.stringify( state ) );
-		} );
+			}, 500 );
 		});
 
 		this.#pstate[name] = state;

package/src/core/core_application.ts

@@ -104,8 +104,10 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		main_app = this;
 
+		this.props = props;
+
 		const loaded = ( ) => {
-			this.mount( props.mountPoint ?? 'body' )
+			this.mount( this.props.mountPoint )
 		}
 
 		if( document.readyState=='complete' ) {
@@ -141,13 +143,14 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 
 	/**
      * Sets the main view component for the application.
-     * This component will be mounted to the DOM.
+     * This component will be mounted to the DOM, in `mountPoint`.
+     * Called once: each call sets up the keyboard (Tab, shortcuts) again.
      * @param view - The component to set as the main view.
      */
 	
 	setMainView( view: Component ) {
 		this.mainview = view;
-		this.mount( );
+		this.mount( this.props.mountPoint );
 		this._setupKeyboard( );
 	}
 
@@ -321,7 +324,8 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 				return;
 			}
 
-			if( msg_socket ) {
+			// send throws while the socket is connecting
+			if( msg_socket && opened ) {
 				msg_socket.send( JSON.stringify( {
 					msg: e.msg,
 					params: e.params,

package/src/core/core_clipboard.ts

@@ -0,0 +1,239 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file core_clipboard.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.
+ **/
+
+/**
+ * The clipboard of the system: a text, an image, files.
+ *
+ * There are two ways to it, and they do not give the same things.
+ *
+ * In a "copy", "cut" or "paste" event (the keys of the user, the menu of
+ * the browser), the browser gives its clipboard at once and asks nothing:
+ * setEventClipboard, getEventClipboard. It is the only way to read files.
+ *
+ * Out of an event (a menu, a button), the system is asked: setClipboard,
+ * getClipboard. It is asynchronous, the browser may ask the user for a
+ * permission or refuse, and there is nothing to ask on a page that is not
+ * served in https. So what the application set last is kept: it is what is
+ * read when the system does not answer, and copy and paste still work
+ * inside the application.
+ *
+ * Files cannot be written, in neither way.
+ */
+
+export interface ClipboardContent {
+	text?: string;
+	/** written as a PNG, the format every browser takes: another one is converted */
+	image?: Blob;
+}
+
+export interface ClipboardRead extends ClipboardContent {
+	/** all the files, the images too; none out of an event */
+	files: File[];
+}
+
+/** what the application set last */
+let kept: ClipboardContent = null;
+
+function toPng( image: Blob ): Promise<Blob> {
+	return new Promise( ( resolve, reject ) => {
+		const url = URL.createObjectURL( image );
+		const img = document.createElement( "img" );
+
+		img.onload = ( ) => {
+			URL.revokeObjectURL( url );
+
+			const canvas = document.createElement( "canvas" );
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			canvas.getContext( "2d" ).drawImage( img, 0, 0 );
+
+			canvas.toBlob( png => png ? resolve( png ) : reject( new Error( "not an image" ) ), "image/png" );
+		};
+
+		img.onerror = ( ) => {
+			URL.revokeObjectURL( url );
+			reject( new Error( "not an image" ) );
+		};
+
+		img.src = url;
+	} );
+}
+
+/**
+ * Set the clipboard, from a menu or a button.
+ *
+ * @returns true when the system took it. When it did not, getClipboard
+ * still gives it back: it can be pasted in the application.
+ *
+ * @example
+ * setClipboard( { text: "hello" } );
+ * setClipboard( { image: blob, text: "the same, for what cannot paste an image" } );
+ */
+
+export async function setClipboard( data: ClipboardContent ): Promise<boolean> {
+	kept = { text: data.text, image: data.image };
+
+	// not there on a page that is not served in https
+	const system = navigator.clipboard;
+	if( !system ) {
+		return false;
+	}
+
+	try {
+		if( !data.image ) {
+			await system.writeText( data.text ?? "" );
+			return true;
+		}
+
+		// the conversion is given as a promise: the system has to be asked
+		// now, while the click of the user still allows it
+		const parts: Record<string,Blob | Promise<Blob>> = {
+			"image/png": data.image.type==="image/png" ? data.image : toPng( data.image ),
+		};
+
+		if( data.text ) {
+			parts["text/plain"] = new Blob( [data.text], { type: "text/plain" } );
+		}
+
+		await system.write( [new ClipboardItem( parts )] );
+		return true;
+	}
+	catch( e ) {
+		return false;
+	}
+}
+
+/**
+ * Read the clipboard, from a menu or a button.
+ *
+ * @returns what the system holds. When it refuses or cannot be asked, what
+ * the application set last. Never files: see getEventClipboard.
+ *
+ * @example
+ * const data = await getClipboard( );
+ * if( data.text ) {
+ * 	input.setValue( data.text );
+ * }
+ */
+
+export async function getClipboard( ): Promise<ClipboardRead> {
+	const system = navigator.clipboard;
+
+	if( system ) {
+		try {
+			// read gives the images too, but some browsers only have readText
+			if( !system.read ) {
+				const text = await system.readText( );
+				return { text: text || undefined, files: [] };
+			}
+
+			const data: ClipboardRead = { files: [] };
+
+			for( const item of await system.read( ) ) {
+				for( const type of item.types ) {
+					if( type==="text/plain" && !data.text ) {
+						const blob = await item.getType( type );
+						data.text = ( await blob.text( ) ) || undefined;
+					}
+					else if( type.startsWith( "image/" ) && !data.image ) {
+						data.image = await item.getType( type );
+					}
+				}
+			}
+
+			return data;
+		}
+		catch( e ) {
+			// refused: what the application has
+		}
+	}
+
+	if( kept ) {
+		return { text: kept.text, image: kept.image, files: [] };
+	}
+
+	return { files: [] };
+}
+
+/**
+ * false when getClipboard has nothing to give: the system cannot be asked,
+ * and the application did not set anything. What the system holds is not
+ * known before it is asked for.
+ *
+ * @example
+ * { text: _tr.global.paste, disabled: !canReadClipboard( ), click: ( ) => this.paste( ) }
+ */
+
+export function canReadClipboard( ): boolean {
+	const system = navigator.clipboard;
+	if( system && ( system.read || system.readText ) ) {
+		return true;
+	}
+
+	return !!kept;
+}
+
+/**
+ * Set the clipboard in a "copy" or a "cut" event. The default of the event
+ * is prevented: the browser would copy its own selection instead.
+ *
+ * @example
+ * this.addDOMEvent( "copy", ev => {
+ * 	setEventClipboard( ev, { text: this.getSelectedText( ) } );
+ * } );
+ */
+
+export function setEventClipboard( ev: ClipboardEvent, data: ClipboardContent ): void {
+	kept = { text: data.text, image: data.image };
+
+	ev.preventDefault( );
+
+	if( data.text!==undefined && ev.clipboardData ) {
+		ev.clipboardData.setData( "text/plain", data.text );
+	}
+
+	// the event only takes texts: the image is given to the system
+	if( data.image ) {
+		setClipboard( data );
+	}
+}
+
+/**
+ * Read the clipboard in a "paste" event. The default of the event is left
+ * as it is: prevent it when what was read is used.
+ *
+ * @example
+ * this.addDOMEvent( "paste", ev => {
+ * 	const data = getEventClipboard( ev );
+ * 	if( data.image ) {
+ * 		ev.preventDefault( );
+ * 		this.setPicture( data.image );
+ * 	}
+ * } );
+ */
+
+export function getEventClipboard( ev: ClipboardEvent ): ClipboardRead {
+	const data: ClipboardRead = { files: [] };
+
+	const transfer = ev.clipboardData;
+	if( transfer ) {
+		data.text = transfer.getData( "text/plain" ) || undefined;
+		data.files = Array.from( transfer.files );
+		data.image = data.files.find( file => file.type.startsWith( "image/" ) );
+	}
+
+	return data;
+}