x4js 2.3.20 → 2.3.22

package/src/components/colorpicker/colorpicker.ts

@@ -30,6 +30,9 @@ export interface ColorPickerProps extends ComponentProps {
 
 	/** Adds a "no color" swatch: picking it fires `change` with a null color. */
 	nullable?: boolean;
+
+	/** false: the colors are opaque, there is no alpha slider (default true). */
+	alpha?: boolean;
 }
 
 interface HueChangeEvent extends ComponentEvent {
@@ -83,13 +86,17 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
 			created: () => this.updateThumbMarker( ),
 		} );
 
-		this.updateBaseColor( init );
+		// the color at start: its hue, and the thumb on its saturation and value
+		this.setColor( init );
 	}
 
 	mousedown( ev: PointerEvent ) {
 		this.mdown = true;
 		this.irect = this.getBoundingRect( );
 		this.setCapture( ev.pointerId );
+
+		// a click takes the point too, without a move
+		this.mousemove( ev );
 	}
 
 	mousemove( ev: PointerEvent ) {
@@ -213,6 +220,9 @@ class HueSlider extends Box<BoxProps,CommonEvents> {
 		this.mdown = true;
 		this.irect = this.getBoundingRect( );
 		this.setCapture( ev.pointerId );
+
+		// a click takes the point too, without a move
+		this.mousemove( ev );
 	}
 
 	mousemove( ev: PointerEvent ) {
@@ -286,14 +296,17 @@ class AlphaSlider extends Box<BoxProps,CommonEvents> {
 			pointerup: ( e ) => this._on_mouseup( e ),
 		} );
 
-		this.updateAlpha( );
-		this.updateBaseColor( init );
+		// the color at start: its gradient, and the thumb on its alpha
+		this.setColor( init );
 	}
 
 	_on_mousedown( ev: PointerEvent ) {
 		this.mdown = true;
 		this.irect = this.getBoundingRect( );
 		this.setCapture( ev.pointerId );
+
+		// a click takes the point too, without a move
+		this._on_mousemove( ev );
 	}
 
 	_on_mousemove( ev: PointerEvent ) {
@@ -370,7 +383,10 @@ interface ColorPickerChangeEvents extends ComponentEvents {
 }
 
 /**
- *
+ * @cssvar
+ * ```
+ * --colorpicker-none
+ * ```
  */
 
 @class_ns( "x4" )
@@ -395,6 +411,11 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 			this._base = new Color( props.color );
 		}
 
+		// no alpha: the color is opaque
+		if( props.alpha===false ) {
+			this._base.setAlpha( 1 );
+		}
+
 		const hsv = this._hsv = this._base.toHsv( );
 
 		this.setAttribute( "tabindex", 0 );
@@ -417,6 +438,8 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 			this._swatches = new HBox( { cls: "swatches" } ),
 		]);
 
+		this._alpha.show( props.alpha!==false );
+
 		this._sat.on( "sat_change", ( ev ) => {
 			this._hsv.saturation = ev.saturation;
 			this._hsv.value = ev.value;
@@ -460,14 +483,21 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 	private _changed( ) {
 		const hsv = this._hsv;
 
-		this._base.setHsv( hsv.hue, hsv.saturation, hsv.value, hsv.alpha );
+		// no alpha: the hidden slider can still be moved by the keys, the color stays opaque
+		let alpha = hsv.alpha;
+		if( this.props.alpha===false ) {
+			alpha = 1;
+		}
+
+		this._base.setHsv( hsv.hue, hsv.saturation, hsv.value, alpha );
 		this._refresh( );
 		this._notify( );
 	}
 
 	private _refresh( ) {
-		this._swatch.setStyleValue( "backgroundColor", this._base.toRgbString() );
-		this._swatch.setAttribute( "tooltip", this._base.toRgbString() );
+		// with its alpha: the swatch is drawn over checkers
+		this._swatch.setStyleValue( "backgroundColor", this._base.toRgbString( true ) );
+		this._swatch.setAttribute( "tooltip", this._base.toRgbString( true ) );
 	}
 
 	private _notify( ) {
@@ -499,8 +529,13 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 	setColor( color: Color | string ) {
 		const rgb = ( color instanceof Color ? color : new Color( color ) ).toRgb( );
 
+		let alpha = rgb.alpha;
+		if( this.props.alpha===false ) {
+			alpha = 1;
+		}
+
 		// the color itself is kept as given: going through hsv could shift it
-		this._base.setRgb( rgb.red, rgb.green, rgb.blue, rgb.alpha );
+		this._base.setRgb( rgb.red, rgb.green, rgb.blue, alpha );
 
 		const hsv = this._base.toHsv( );
 		this._hsv.hue = hsv.hue;
@@ -538,14 +573,17 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 				continue;
 			}
 
-			items.push( new Component( {
+			const item = new Component( {
 				cls: "item",
 				tooltip: color.toHexString( ),
-				style: { backgroundColor: color.toRgbString( ) },
 				dom_events: {
 					click: ( ) => this._pick( color ),
 				},
-			} ) );
+			} );
+
+			// as it is taken: opaque without alpha; the stylesheet draws it over checkers
+			item.setStyleVariable( "--swatch-color", color.toRgbString( this.props.alpha!==false ) );
+			items.push( item );
 		}
 
 		this._swatches.setContent( items );
@@ -593,6 +631,14 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 				}
 				break;
 			}
+
+			default: {
+				// not for the picker: Tab, Escape... go on
+				return;
+			}
 		}
+
+		// the arrows move the picker, not the page
+		ev.preventDefault( );
 	}
 }

package/src/components/components.ts

@@ -35,6 +35,7 @@ export * from "./propgrid/propgrid"
 export * from "./radio/radio"
 export * from "./rating/rating"
 export * from "./select/select"
+export * from "./settingsview/settingsview"
 export * from "./sizers/sizer"
 export * from "./slider/slider"
 export * from "./spreadsheet/spreadsheet"

package/src/components/dialog/dialog.ts

@@ -64,7 +64,8 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 	private _title: Label;
 
 	constructor(props: P) {
-		super({ tag: "dialog", modal: true, ...props });
+		// content is the content of its form
+		super({ tag: "dialog", modal: true, ...props, content: undefined });
 
 		this._ismodal = this.props.modal;
 
@@ -95,7 +96,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 					}) : null,
 				]
 			}),
-			this.form = props.form ? props.form : new Form({}),
+			this.form = props.form ? props.form : new Form({ content: props.content }),
 			new BtnGroup({
 				id: "btnbar",
 				reverse: true,
@@ -133,9 +134,19 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 			}
 		})
 
-		asap( ( ) => {
-			this.focusNext( true );
-		} );
+	}
+
+	/**
+	 * each time it opens: the focus on its first field
+	 */
+
+	override show( show = true ): this {
+		super.show( show );
+		if( show ) {
+			asap( ( ) => this.focusNext( true ) );
+		}
+
+		return this;
 	}
 
 	private focusNext( next: boolean) : boolean {

package/src/components/form/form.ts

@@ -105,10 +105,9 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 	 */
 
 	setAutoComplete( on = true ) {
-		const items = this._get_inputs( );
-		items.forEach( x => {		
-			x.setAttribute( "autocomplete", on ? "on" : "off" );
-		} );
+		// on the <form>: its fields without an autocomplete of their own follow it,
+		// those added later too
+		this.setAttribute( "autocomplete", on ? "on" : "off" );
 	}
 
 	/**

package/src/components/gridview/gridview.module.scss

@@ -16,31 +16,32 @@
 
 
 :root {
-	--gridview-background: white;
+	// from the theme: a dark theme (its scale --color-primary-* reversed) gives a dark grid
+	--gridview-background: var( --background-primary );
 	--gridview-border: var( --border );
 	
-	--gridview-header-cell-background: white;
-	--gridview-header-cell-color: black;
-	--gridview-header-cell-vline: #f0f0f0;
-	--gridview-header-cell-border: #cccccc;
+	--gridview-header-cell-background: var( --background-primary );
+	--gridview-header-cell-color: var( --text-primary );
+	--gridview-header-cell-vline: var( --border );
+	--gridview-header-cell-border: var( --border );
 
 	--grid-check-background: var( --accent-background );
-	--grid-check-color: white;
-	--grid-check-background-hover: white;
+	--grid-check-color: var( --accent-color );
+	--grid-check-background-hover: var( --background-primary );
 	--grid-check-color-hover: var( --accent-background );
 
 	--grid-perc-background: var( --accent-background );
-	--grid-perc-color: white;
-	--grid-perc-background-hover: white;
+	--grid-perc-color: var( --accent-color );
+	--grid-perc-background-hover: var( --background-primary );
 	--grid-perc-color-hover: var( --accent-background );
 
 
-	--gridview-cell-color: black;
-	--gridview-cell-color-sel: white;
+	--gridview-cell-color: var( --text-primary );
+	--gridview-cell-color-sel: var( --accent-color );
 	--gridview-cell-vline: var( --border );
 
-	--gridview-row-background: white;
-	--gridview-row-odd-background: white;
+	--gridview-row-background: var( --background-primary );
+	--gridview-row-odd-background: var( --background-primary );
 	--gridview-row-border: var( --border );
 
 	--gridview-row-background-hover: var( --background-secondary );
@@ -71,6 +72,7 @@
 
 	background-color: var( --gridview-background );
 	border: 1px solid var( --gridview-border );
+	color: var( --gridview-cell-color );
 		
 	.cell {
 		padding: 4px;
@@ -159,7 +161,7 @@
 				width: 100%;
 				border: 1px solid var( --border );
 				height: 8px;
-				background-color: white;
+				background-color: var( --gridview-background );
 				overflow: hidden;
 
 				div {
@@ -219,7 +221,7 @@
 		display: inline-flex;
 		align-items: center;
 
-		color: black;
+		color: var( --gridview-header-cell-color );
 		font-weight: 500;
 		justify-content: center;
 
@@ -320,7 +322,7 @@
 		width: var( --fixed-width );
 		bottom: 0;
 		
-		background-color: white;
+		background-color: var( --gridview-background );
 		z-index: 1;
 
 		.row {

package/src/components/gridview/gridview.ts

@@ -559,6 +559,11 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 	private _scrollToIndex( index: number, block = 'nearest' ) {
 
+		// not built yet: nothing to scroll
+		if( !this._viewport ) {
+			return;
+		}
+
 		// is it already visible ?
 		let rows = this.queryAll(`.row[data-row="${index}"]`);
 		if (rows.length) {

package/src/components/icon/icon.ts

@@ -27,7 +27,7 @@ type solveCallback = (data:string)=>void;
 
 class SvgLoader {
 	private cache: Map<string,string>;
-	private waiters: Map<string,solveCallback[]>;
+	private waiters: Map<string,{ resolve: solveCallback, reject: ( e: any ) => void }[]>;
 
 	constructor( ) {
 		this.cache = new Map( );
@@ -37,26 +37,35 @@ class SvgLoader {
 	async load( file: string ): Promise<string> {
 
 		if( this.cache.has(file) ) {
-			return Promise.resolve( this.cache.get(file) );
+			// null: the file was not found, it is not asked again
+			const svg = this.cache.get( file );
+			if( svg===null ) {
+				return Promise.reject( new Error( `file not found: ${file}` ) );
+			}
+
+			return Promise.resolve( svg );
 		}
 
 		return new Promise( (resolve,reject) => {
+			// already asked: the same answer
 			if( this.waiters.has(file) ) {
-				this.waiters.get(file).push( resolve );
-			}
-			else {
-				this.waiters.set( file, [resolve] );
-				this._load( file )
-					.then( ( data: string ) => {
-						this.cache.set( file, data );
-						const ww = this.waiters.get( file );
-						ww.forEach( cb => cb(data ) );
-					})
-					.catch( e => {
-						this.cache.set( file, null );
-						reject( e );
-					} )
+				this.waiters.get(file).push( { resolve, reject } );
+				return;
 			}
+
+			this.waiters.set( file, [{ resolve, reject }] );
+			this._load( file )
+				.then( ( data: string ) => {
+					this.cache.set( file, data );
+					this.waiters.get( file ).forEach( w => w.resolve( data ) );
+					this.waiters.delete( file );
+				})
+				.catch( e => {
+					// kept as not found: it is not asked again
+					this.cache.set( file, null );
+					this.waiters.get( file ).forEach( w => w.reject( e ) );
+					this.waiters.delete( file );
+				} );
 		});
 	}
 
@@ -83,6 +92,8 @@ export interface IconProps extends ComponentProps {
 	/**
      * Identifier for the icon.
      * Can be a URL, a CSS variable (prefixed with `var:`), or inline SVG data.
+     * `var:home` (or `var:--home`) is the variable --home set on <html> by the code:
+     * document.documentElement.style.setProperty( "--home", svg ).
      * @example
      * // Using a CSS variable
      * { iconId: "var:home" }
@@ -139,8 +150,13 @@ export class Icon extends Component<IconProps> {
 		if( iconId ) {
 			if( iconId.startsWith('var:') ) {
 				do {
-					const path = iconId.substring( 4 );
-					iconId = document.documentElement.style.getPropertyValue( path );
+					// "var:home" or "var:--home": the variable --home, set on <html>
+					let name = iconId.substring( 4 );
+					if( !name.startsWith( "--" ) ) {
+						name = "--" + name;
+					}
+
+					iconId = document.documentElement.style.getPropertyValue( name );
 				} while( iconId.startsWith('var:') );
 			} 
 

package/src/components/keyboard/keyboard.ts

@@ -239,6 +239,14 @@ function accentLabel( layout: KbLayout, upper: boolean ): string {
 	return ( upper ? upperKeys( label ) : label ).replace( " ", "" );
 }
 
+/**
+ * the keys that draw the keyboard again: shift, 123, abc, accents, signs
+ */
+
+function redrawKey( key: number ) {
+	return key==4 || key==5 || key==8 || key==10 || key==11;
+}
+
 
 const RE_sel = /text|password|search|tel|url/i;
 
@@ -248,6 +256,12 @@ interface KeyboardProps extends BoxProps {
 	 * "de-CH", "pl"... "fr-FR" when it is not given
 	 */
 	locale?: string;
+
+	/**
+	 * on a number or date field, the keyboard stays on the pad: no "abc" key
+	 * back to the letters. The other fields keep all the keys.
+	 */
+	numpadOnly?: boolean;
 }
 
 /**
@@ -284,15 +298,20 @@ export class Keyboard extends HBox<KeyboardProps>
 
 		this.hide( );
 
+		// a key: each contact, a finger or the mouse, the second tap of a quick double tap too.
+		// not the keys that draw the keyboard again, they act on the click
+		this.addDOMEvent( "pointerdown", (e) => {
+			this.handleKeyEvent( e );
+		});
+
+		// the focus stays in the field
 		this.addDOMEvent( "mousedown", (e) => {
-			this.handleKeyEvent( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
 
-		// for rapid people
+		// a double click or a double tap: its two pointerdown gave the two keys
 		this.addDOMEvent( "dblclick", (e) => {
-			this.handleKeyEvent( e ); 	
 			e.preventDefault( );
 			e.stopPropagation( );
 		});
@@ -348,7 +367,7 @@ export class Keyboard extends HBox<KeyboardProps>
             target = target.parentNode as HTMLElement;
         }
 
-		if( !key ) {
+		if( !key || redrawKey( key ) ) {
 			return;
 		}
 
@@ -627,6 +646,11 @@ export class Keyboard extends HBox<KeyboardProps>
 
 		if( this.mode=="number" || this.mode=="date" ) {
 			lines = kb_pads[this.mode];
+
+			// no key back to the letters: its place stays empty
+			if( this.props.numpadOnly ) {
+				lines = lines.map( line => line.replace( "{8}", "{9}" ) );
+			}
 		}
 		else if( this.mode=="accents" ) {
 			lines = accentLines( layout, this.upper );
@@ -761,7 +785,9 @@ export class Keyboard extends HBox<KeyboardProps>
 					icon, 
 					autorepeat: repeat, 
 					click: ( e ) => {
-						if( e.repeat ) {
+						// the keys that draw the keyboard again act on the click: the mousedown
+						// that follows a pointerdown would go to a key no longer in the page
+						if( e.repeat || redrawKey( key ) ) {
 							this._handleKey( key )
 						}
 					}

package/src/components/link/link.ts

@@ -56,11 +56,14 @@ export class Link extends Component<LinkProps,LinkEvents> {
 
 		this.mapPropEvents( props, "click" );
 
-		this.setContent( new Label( {
-			text: props.text,
-			icon: props.icon,
-			align: props.align,
-		} ) );
+		// content given: it is the link; else a label (icon and text)
+		if( props.content===undefined ) {
+			this.setContent( new Label( {
+				text: props.text,
+				icon: props.icon,
+				align: props.align,
+			} ) );
+		}
 
 		this.addDOMEvent('click', (e) => this._on_click(e));
 	}
@@ -71,7 +74,14 @@ export class Link extends Component<LinkProps,LinkEvents> {
 	 */
 
 	setText( text: string | UnsafeHtml ) {
-		this.setContent( text );
+		// the text of the label: its icon and alignment stay
+		const label = this.query<Label>( ":scope > .x4label" );
+		if( label ) {
+			label.setText( text );
+		}
+		else {
+			this.setContent( text );
+		}
 	}
 
 	/**
@@ -83,7 +93,8 @@ export class Link extends Component<LinkProps,LinkEvents> {
 		const xev: EvClick = {context: this.props.href };
 		this.fire('click', xev );
 	
-		if( xev.preventDefault ) {
+		// the handler called ev.preventDefault( ): the link is not followed
+		if( xev.defaultPrevented ) {
 			ev.preventDefault();
 			ev.stopPropagation();
 		}

package/src/components/messages/messages.ts

@@ -66,7 +66,7 @@ export class MessageBox extends Dialog<DialogProps>
 				content: [
 					new HBox( {
 						content: [
-							new Icon( { iconId: error_icon }),
+							new Icon( { iconId: icon }),
 							new Label( { text: msg } ),
 						]
 					}),

package/src/components/panel/panel.ts

@@ -39,7 +39,7 @@ interface PanelProps extends ComponentProps {
 @class_ns( "x4" )
 export class Panel extends VBox<PanelProps> {
 
-	private _title: Component;
+	private _title: Label;
 	private _body: Component;
 
 	constructor( props: PanelProps ) {
@@ -57,6 +57,7 @@ export class Panel extends VBox<PanelProps> {
 	}
 
 	setTitle( title: string | UnsafeHtml ) {
-		this._title.setContent( title )
+		// the text of the label: its icon stays
+		this._title.setText( title );
 	}
 }