x4js 2.3.17 → 2.3.19

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;
 		}
 	}