x4js 2.3.18 → 2.3.20

package/src/components/combobox/combobox.ts

@@ -144,30 +144,15 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		}
 
 		this._popup = new DropdownList( { items: props.items, renderer: props.renderer } );
-		const list = this._popup.getList( );
-
-		const _select = ( sel: ListboxID ) => {
-			const itm = list.getItem(sel);
-			if( itm ) {
-				list.select( sel, false );
-				this._input.setValue( itm.text as string );
-			}
-
-			if( !this._prevent_close ) {
-				this._popup.show( false );
-			}
-		}
-
 		this._popup.on( "click", ( ev ) => {
 			const sel = ev.context as ListboxID;
 			if( sel!==undefined ) {	// no empty sel
-				_select( sel );			
-				this.fire( "selectionChange", { selection: [sel], empty: false }  );
+				this._choose( sel, true );
 			}
 		});
 
 		if( props.value!==undefined && props.value!==null ) {
-			_select( props.value );
+			this._choose( props.value, false );
 		}
 
 		this._button.addDOMEvent( "click", ( ) => this._on_click( ) );
@@ -180,6 +165,27 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 		})
 	}
 
+	/**
+	 * the item chosen: by a click, by the arrows (the popup stays open), or by the props
+	 */
+
+	private _choose( sel: ListboxID, notify: boolean ) {
+		const list = this._getList( );
+		const itm = list.getItem( sel );
+		if( itm ) {
+			list.select( sel, false );
+			this._input.setValue( itm.text as string );
+		}
+
+		if( !this._prevent_close ) {
+			this._popup.show( false );
+		}
+
+		if( notify ) {
+			this.fire( "selectionChange", { selection: [sel], empty: false } );
+		}
+	}
+
 	private _on_key( ev: KeyboardEvent ) {
 		switch( ev.key ) {
 			case "Enter":
@@ -197,7 +203,13 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 					this.showDropDown( );
 				}
 				else {
-					this._popup.getList().navigate( kbNav.prev );
+					// the item reached is chosen at once
+					const list = this._getList( );
+					list.navigate( kbNav.prev );
+					const [sel] = list.getSelection( );
+					if( sel!==undefined ) {
+						this._choose( sel, true );
+					}
 				}
 
 				this._prevent_close = false;
@@ -209,7 +221,13 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 					this.showDropDown( );
 				}
 				else {
-					this._popup.getList().navigate( kbNav.next );
+					// the item reached is chosen at once
+					const list = this._getList( );
+					list.navigate( kbNav.next );
+					const [sel] = list.getSelection( );
+					if( sel!==undefined ) {
+						this._choose( sel, true );
+					}
 				}
 
 				this._prevent_close = false;
@@ -229,7 +247,18 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			this.showDropDown( );
 		}
 
-		this._popup.getList().filter( this._input.getValue( ) );
+		// the text typed is no longer the one of the item chosen: none is chosen
+		const list = this._getList( );
+		const sel = this.getSelection( );
+		if( sel!==undefined ) {
+			const itm = list.getItem( sel );
+			if( !itm || itm.text!==this._input.getValue( ) ) {
+				list.clearSelection( false );
+				this.fire( "selectionChange", { selection: [], empty: true } );
+			}
+		}
+
+		list.filter( this._input.getValue( ) );
 	}
 
 	private _on_focusout( ) {
@@ -268,10 +297,9 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 	selectItem( index: ListboxID ) {
 		const list = this._getList( );
 		list.select( index );
+		// no item (null...): the text is emptied too
 		const el = list.getItem( index );
-		if( el ) {
-			this.setValue( el.text as string );
-		}
+		this.setValue( el ? el.text as string : "" );
 	}
 
 	getSelection( ) {

package/src/components/dialog/dialog.ts

@@ -257,11 +257,14 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 
 			this.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
-					this.close( );
 					resolve( ev.button );
+					this.close( );
 				});
 			});
 
+			// closed without a button (Escape, the close box): nothing was chosen
+			this.on( "closed", ( ) => resolve( null ) );
+
 			this.show();
 		} );
 	}

package/src/components/form/form.ts

@@ -117,13 +117,14 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 
 	setValidator( validator: ValidationFn ) {
 
+		// focusout: once, the first time
 		if( !this.validator ) {
-			this.validator = validator;
-			
 			// validation en live des valeurs
 			// disable du bouton ok si pas bon
 			this.addDOMEvent( "focusout", ( ) => this.validate() );
 		}
+
+		this.validator = validator;
 	}
 
 	/**
@@ -155,11 +156,14 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 				return null;
 			}
 
-			for( let name in result ) {
+			// the elements already found: a select, a textarea, a rating... every radio of a group
+			for( const x of items ) {
+				const name = x.getAttribute( "name" );
 				if( new_values[name] != result[name] ) {
-					const x = this.query( `input[name="${name}"]` );
 					const ifx = x.queryInterface( "form-element" ) as IFormElement;
-					ifx.setRawValue( new_values[name] );
+					if( ifx ) {
+						ifx.setRawValue( new_values[name] );
+					}
 				}
 			}
 

package/src/components/gridview/gridview.ts

@@ -699,7 +699,8 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		if (lock) {
 			this._lock++;
 		}
-		else {
+		// an unlock too many leaves it at 0: the grid goes on drawing
+		else if (this._lock > 0) {
 			if (--this._lock == 0 && this._dirty) {
 				this._update( true );
 			}

package/src/components/input/input.ts

@@ -15,22 +15,24 @@
  **/
 
 import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, componentFromDOM, ComponentProps, EvChange, EvFocus } from '../../core/component';
+import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
 import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools';
 
 import "./input.module.scss"
 
 
-function getRadioOwner( el: Element )  {
+/**
+ * @internal where to look for the radios of a group: the form that holds them,
+ * else the document
+ */
 
-	while( el!=document.body ) {
-		const comp = componentFromDOM(el);
-		const ifx = comp.queryInterface( "tab-handler");
-		if( ifx ) {
-			return el;
-		}
+export function getRadioOwner( el: Element ): ParentNode {
 
-		el = el.parentElement;
+	// two forms of a page can each have a group of the same name;
+	// a dialog has its form, its radios are in it
+	const form = el.closest( "form" );
+	if( form ) {
+		return form;
 	}
 
 	return document;
@@ -222,7 +224,19 @@ export class Input extends Component<InputProps,InputEvents> {
 		if( props.autofocus===true ) {
 			this.setAttribute( "autofocus", true );
 		}
-					
+
+		// every type but checkbox and radio (range and file ignore readonly)
+		if( props.type!="checkbox" && props.type!="radio" ) {
+			this.setAttribute( "required", props.required );
+			this.setAttribute( "readonly", props.readonly );
+		}
+
+		// placeholder: shown by the browser on text, email, password and number only,
+		// not on date nor time (they show their own pattern)
+		if( props.type===undefined || props.type=="text" || props.type=="email" || props.type=="password" || props.type=="number" ) {
+			this.setAttribute( "placeholder", props.placeholder );
+		}
+
 		switch( props.type ) {
 			case "checkbox":
 			case "radio": {
@@ -244,9 +258,7 @@ export class Input extends Component<InputProps,InputEvents> {
 
 			case "number": {
 				const p = this.props as NumberProps;
-			
-				this.setAttribute( "required", p.required );
-				this.setAttribute( "readonly", p.readonly );
+
 				this.setAttribute( "min", p.min );
 				this.setAttribute( "max", p.max );
 				this.setAttribute( "step", p.step );
@@ -256,20 +268,26 @@ export class Input extends Component<InputProps,InputEvents> {
 				this.addDOMEvent( "wheel", ( e: WheelEvent ) => {
 					if( this.hasFocus() ) { // only if has focus
 						e.preventDefault( );
-						let v = this.getNumValue();
-						const delta = e.deltaY < 0 ? 1 : -1;
-						v += (p.step ? p.step : 1) * delta;
-						this.setNumValue( v, -2 );
 
-						this.dom.dispatchEvent(new Event('input')); 
+						// the browser keeps the value between min and max, on the step,
+						// and starts from a valid one when the field is empty
+						const input = this.dom as HTMLInputElement;
+						if( e.deltaY < 0 ) {
+							input.stepUp( );
+						}
+						else {
+							input.stepDown( );
+						}
+
+						// the decimals of the step: 10.1 shown 10.10 for a step of 0.01
+						this.setNumValue( this.getNumValue( ), -2 );
+						this.dom.dispatchEvent(new Event('input'));
 					}
 				}, );
 				break;
 			}
 
 			case "date": {
-				this.setAttribute( "required", props.required );
-
 				let v = props.value;
 				if( v instanceof Date ) {
 					this.setAttribute( "value", formatIntlDate( v, "Y-M-D" ) );
@@ -295,7 +313,6 @@ export class Input extends Component<InputProps,InputEvents> {
 			}
 
 			case "time": {
-				this.setAttribute( "required", props.required );
 				if( props.value!==null && props.value!==undefined ) {
 					this.setAttribute( "value", props.value );
 				}
@@ -303,9 +320,6 @@ export class Input extends Component<InputProps,InputEvents> {
 			}
 
 			default: {
-				this.setAttribute( "required", props.required );
-				this.setAttribute( "readonly", props.readonly );
-
 				if( props.value!==null && props.value!==undefined ) {
 					this.setAttribute( "value", props.value );
 				}
@@ -314,10 +328,6 @@ export class Input extends Component<InputProps,InputEvents> {
 					this.setAttribute( "pattern", props.pattern );
 				}
 
-				if( props.placeholder!==null && props.placeholder!==undefined ) {
-					this.setAttribute( "placeholder", props.placeholder );
-				}
-
 				if( props.spellcheck===false ) {
 					this.setAttribute( "spellcheck", false );
 				}
@@ -417,14 +427,19 @@ export class Input extends Component<InputProps,InputEvents> {
 		}
 
 		if( ndec==-2 && this.props.type=='number' ) {
-			const p = this.props as NumberProps;
+			const step = (this.props as NumberProps).step;
+
+			// as many decimals as the step, 4 at most: the step in 1/10000 is an integer,
+			// each 0 on its right is a decimal less (0.25 → 2500 → 2, 2.5 → 25000 → 1, 2 → 0)
+			if( step!==undefined && step!=1 ) {
+				let n = Math.round( step * 10000 );
+				let decimals = 4;
+				while( n && n%10==0 && decimals ) {
+					n /= 10;
+					decimals--;
+				}
 
-			if( p.step<1 ) {
-				let ndec = -Math.floor(Math.log10(p.step ?? 1) );
-				return this.setValue( value.toFixed(ndec) );
-			}
-			else if( p.step>1 ) {
-				return this.setValue( value.toFixed() );
+				return this.setValue( value.toFixed( decimals ) );
 			}
 		}
 		else if( ndec>=0 ) {
@@ -506,9 +521,16 @@ export class Input extends Component<InputProps,InputEvents> {
 	override queryInterface<T extends IComponentInterface>( name: string ): T {
 		if( name=="form-element" ) {
 			const i: IFormElement = {
-				getRawValue: ( ): any => { 
+				getRawValue: ( ): any => {
+					// checkbox without value, or a boolean one: a boolean; with one: the value when checked,
+					// null when not (as a <form>)
 					if( this.props.type=='checkbox' ) {
-						return this.getCheck( );
+						const value = this.props.value;
+						if( value===undefined || typeof value==="boolean" ) {
+							return this.getCheck( );
+						}
+
+						return this.getCheck( ) ? value : null;
 					}
 					else if( this.props.type=='radio' ) {
 						const owner = getRadioOwner( this.dom );
@@ -523,8 +545,11 @@ export class Input extends Component<InputProps,InputEvents> {
 					}
 				},
 				setRawValue: ( v: any ) => { 
+					// checkbox with a value (not a boolean): checked by that value (or true)
 					if( this.props.type=='checkbox' ) {
-						this.setCheck( !!v );
+						const value = this.props.value;
+						const plain = value===undefined || typeof value==="boolean";
+						this.setCheck( plain ? !!v : ( v===value || v===true ) );
 					}
 					else if( this.props.type=='radio' ) {
 						if( this.props.value==v ) {

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

@@ -17,6 +17,9 @@
 :root {
 	--keyboard-key-background: #33302d;
 	--keyboard-hilite-color: #5ba921;
+	--keyboard-key-color: #ffffff;
+	--keyboard-accents-color: #7cc7ff;
+	--keyboard-symbols-color: #f2c94c;
 	--keyboard-zoom: 100%;
 }
 
@@ -62,7 +65,8 @@
 			width: 100%;
 		}
 		
-		color: white;
+		// the color of the page, for the keys of characters
+		color: var( --kb-page-color, var( --keyboard-key-color ) );
 		text-align: center;
 		
 		background-color: var( --keyboard-key-background);
@@ -83,6 +87,29 @@
 	}
 
 
+	.accents {
+		--kb-page-color: var( --keyboard-accents-color );
+	}
+
+	.symbols {
+		--kb-page-color: var( --keyboard-symbols-color );
+	}
+
+	// the keys of commands keep their color, the keys that call a page have its one
+	.cnum,
+	.calpha,
+	.cspace {
+		color: var( --keyboard-key-color );
+	}
+
+	.caccents {
+		color: var( --keyboard-accents-color );
+	}
+
+	.csymbols {
+		color: var( --keyboard-symbols-color );
+	}
+
 	.cplace {
 		visibility: hidden;
 	}
@@ -109,8 +136,9 @@
 
 	//		color: rgba(255,255,255,0.3);
 
-	.lower,
-	.upper {
+	.alpha,
+	.accents,
+	.symbols {
 
 		.cspace { 
 			flex-basis: 689px;
@@ -128,7 +156,10 @@
 			flex-basis: 88px;
 		}
 
-		.cnum {
+		.cnum,
+		.caccents,
+		.csymbols,
+		.calpha {
 			flex-basis: 88px;
 		}
 	}

package/src/components/keyboard/keyboard.ts

@@ -30,8 +30,9 @@ import icon_hide from "./eye-slash.svg";
 
 /**
  * A layout is the place of the 26 letters (its base) and the letters that
- * a language adds to them (its extra), shown on rows of their own. The
- * upper case is computed, the digits and the signs are the same for all.
+ * a language adds to them (its extra), shown on a page of their own,
+ * called by a key. The upper case is computed, the digits and the signs
+ * are the same for all.
  *
  * base: the countries where it is not QWERTY are those that
  *   https://en.wikipedia.org/wiki/QWERTZ and /AZERTY list.
@@ -40,6 +41,7 @@ import icon_hide from "./eye-slash.svg";
  */
 
 type KbBase = "azerty" | "qwerty" | "qwertz";
+type KbMode = "alpha" | "accents" | "symbols" | "number" | "date";
 
 interface KbLayout {
 	base: KbBase;
@@ -90,6 +92,13 @@ const kb_countries: Record<string,Partial<KbLayout>> = {
 const kb_digits = "1 2 3 4 5 6 7 8 9 0";
 const kb_signs = "! @ # $ % ^ & * ( ) _ +";
 
+// the page of the signs, that the letters do not have
+const kb_symbols = [
+	"- / : ; ( ) € & @ \"",
+	"\\ | ~ _ ` § £ $ ^ %",
+	"[ ] { } < > = + * #",
+];
+
 const kb_pads = {
 	number: [
 		"1 2 3 {2}",
@@ -160,13 +169,11 @@ function extraLines( extra: string ): string[] {
 
 function letterLines( layout: KbLayout, upper: boolean ): string[] {
 	let [l1, l2, l3] = kb_bases[layout.base];
-	let extra = extraLines( layout.extra );
 
 	if( upper ) {
 		l1 = upperKeys( l1 );
 		l2 = upperKeys( l2 );
 		l3 = upperKeys( l3 );
-		extra = extra.map( upperKeys );
 	}
 
 	return [
@@ -174,11 +181,64 @@ function letterLines( layout: KbLayout, upper: boolean ): string[] {
 		l1 + " {2}",
 		l2 + " {3}",
 		"{4} " + l3 + ( upper ? " ? : {4}" : " , . {4}" ),
+		bottomLine( layout, "alpha" ),
+	];
+}
+
+/**
+ * the page called by {10}: the extra letters
+ */
+
+function accentLines( layout: KbLayout, upper: boolean ): string[] {
+	let extra = extraLines( layout.extra );
+	if( upper ) {
+		extra = extra.map( upperKeys );
+	}
+
+	return [
 		...extra,
-		"{5} {6} ' {7}",
+		"{4} {2} {3}",
+		bottomLine( layout, "accents" ),
 	];
 }
 
+/**
+ * the page called by {11}: the signs
+ */
+
+function symbolLines( layout: KbLayout ): string[] {
+	const [s1, s2, s3] = kb_symbols;
+
+	return [
+		s1 + " {2}",
+		s2 + " {3}",
+		s3,
+		bottomLine( layout, "symbols" ),
+	];
+}
+
+/**
+ * the last row of the pages of letters: the key of the page that is shown
+ * is replaced by {8} at its place, to come back to the letters.
+ * no key of the extra letters when the language has none
+ */
+
+function bottomLine( layout: KbLayout, page: "alpha" | "accents" | "symbols" ): string {
+	const accents = !layout.extra ? "" : page=="accents" ? "{8} " : "{10} ";
+	const symbols = page=="symbols" ? "{8} " : "{11} ";
+
+	return "{5} " + accents + symbols + "{6} ' {7}";
+}
+
+/**
+ * the text of the key that calls the extra letters: the first two of them
+ */
+
+function accentLabel( layout: KbLayout, upper: boolean ): string {
+	const label = layout.extra.split( " " ).slice( 0, 2 ).join( " " );
+	return ( upper ? upperKeys( label ) : label ).replace( " ", "" );
+}
+
 
 const RE_sel = /text|password|search|tel|url/i;
 
@@ -195,13 +255,17 @@ interface KeyboardProps extends BoxProps {
  * ```
  * --keyboard-key-background
  * --keyboard-hilite-color
+ * --keyboard-key-color
+ * --keyboard-accents-color
+ * --keyboard-symbols-color
  * --keyboard-zoom
  * ```
  */
 @class_ns( "x4" )
 export class Keyboard extends HBox<KeyboardProps>
 {
-	mode: "lower" | "upper" | "number" | "date";
+	mode: KbMode;
+	upper: boolean;
 	locale: string;
 	keyboard: Box;
 	visible: boolean;
@@ -210,7 +274,8 @@ export class Keyboard extends HBox<KeyboardProps>
     constructor( props: KeyboardProps )  {
         super( { ...props, id: 'v-keyboard' } );
 
-        this.mode   = 'lower';
+        this.mode   = 'alpha';
+        this.upper  = false;
         this.locale = props.locale ?? 'fr-FR';
 		this.visible = false;
         
@@ -255,6 +320,11 @@ export class Keyboard extends HBox<KeyboardProps>
 	setLocale( locale: string ) {
 		this.locale = locale;
 
+		// a language without extra letters has no page for them
+		if( this.mode=="accents" && !findLayout( locale ).extra ) {
+			this.mode = "alpha";
+		}
+
 		// drawn at least once
 		if( this.keyboard ) {
 			this._redraw( );
@@ -301,15 +371,9 @@ export class Keyboard extends HBox<KeyboardProps>
 
             // shift
             case 4: {
-                if( this.mode=='lower' ) {
-                    this.mode = 'upper';
-                }
-                else {
-                    this.mode = 'lower';
-                }
-
+                this.upper = !this.upper;
                 this._redraw( );
-                break;                
+                break;
             }
 
             // num + sym
@@ -331,7 +395,19 @@ export class Keyboard extends HBox<KeyboardProps>
             }
 
             case 8: {
-                this._switchMode( "lower" );
+                this._switchMode( "alpha" );
+                break;
+            }
+
+            // extra letters
+            case 10: {
+                this._switchMode( "accents" );
+                break;
+            }
+
+            // signs
+            case 11: {
+                this._switchMode( "symbols" );
                 break;
             }
 
@@ -354,7 +430,7 @@ export class Keyboard extends HBox<KeyboardProps>
 	 * 
 	 */
 
-	private _switchMode( m: "lower" | "upper" | "number" | "date" ) {
+	private _switchMode( m: KbMode ) {
 		this.mode = m;
 		this._redraw( );
 	}
@@ -421,7 +497,8 @@ export class Keyboard extends HBox<KeyboardProps>
                         this._switchMode( "date");
                     }
                     else {
-                        this._switchMode( "lower" );
+                        this.upper = false;
+                        this._switchMode( "alpha" );
                     }
                 }
             }
@@ -546,11 +623,19 @@ export class Keyboard extends HBox<KeyboardProps>
 
     private _createContent( ) {
         let     lines: string[];
+		const layout = findLayout( this.locale );
+
 		if( this.mode=="number" || this.mode=="date" ) {
 			lines = kb_pads[this.mode];
 		}
+		else if( this.mode=="accents" ) {
+			lines = accentLines( layout, this.upper );
+		}
+		else if( this.mode=="symbols" ) {
+			lines = symbolLines( layout );
+		}
 		else {
-			lines = letterLines( findLayout( this.locale ), this.mode=="upper" );
+			lines = letterLines( layout, this.upper );
 		}
 
         let     result: Box[] = [];
@@ -643,8 +728,22 @@ export class Keyboard extends HBox<KeyboardProps>
 
 						case 9: 
 						{
-							content = '';       
-							cls += ' cplace'; 
+							content = '';
+							cls += ' cplace';
+							break;
+						}
+
+						case 10:
+						{
+							content = accentLabel( layout, this.upper );
+							cls += ' caccents';
+							break;
+						}
+
+						case 11:
+						{
+							content = '#+=';
+							cls += ' csymbols';
 							break;
 						}
                     }