x4js 2.3.20 → 2.3.21

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

@@ -284,15 +284,19 @@ 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
+		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( );
 		});

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

package/src/components/spreadsheet/spreadsheet.module.scss

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

package/src/components/textarea/textarea.module.scss

@@ -27,6 +27,12 @@
 		flex-shrink: 0;		// alone in a box, it keeps its height: the box does not crush it
 		resize: none;		// no handle unless the prop resize asks for one
 		padding: 4px;
+
+		// never smaller than one character, its padding and border included (border-box):
+		// 10px = 2 x 4px of padding + 2 x 1px of border
+		min-height: calc( 1lh + 10px );
+		min-width: calc( 1ch + 10px );
+
 		outline: none;
 		font: inherit;
 
@@ -65,7 +71,8 @@
 	}
 
 	.x4simpletextarea {
-		@extend %flex;
-
-	}	
+		// its height of rows when the TextArea has none, the TextArea's height when it has one;
+		// a basis of 0 would leave it the height of its padding: a textarea scrolls, its min-height is 0
+		flex: 1 0 auto;
+	}
 }

package/src/components/video/video.ts

@@ -14,7 +14,9 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Box, Component, ComponentProps } from 'x4js';
+import { Component, ComponentProps } from '../../core/component';
+import { class_ns } from '../../core/core_tools';
+import { Box } from '../boxes/boxes';
 
 import "./video.module.scss"
 
@@ -29,6 +31,7 @@ interface VideoProps extends ComponentProps {
  * 
  */
 
+@class_ns( "x4" )
 export class Video extends Box {
 	
 	private _vplayer: HTMLVideoElement;
@@ -124,7 +127,18 @@ export class Video extends Box {
 		this.player.pause( );
 	}
 
-	play( ) {
-		this.player.play( );
+	/**
+	 * @returns false when the playback could not start: the browser wants a click
+	 * of the user first, or the source cannot be played
+	 */
+
+	async play( ): Promise<boolean> {
+		try {
+			await this.player.play( );
+			return true;
+		}
+		catch( e ) {
+			return false;
+		}
 	}
 }

package/src/core/core_colors.ts

@@ -83,8 +83,6 @@ export class Color {
 
 	setValue(value: string): this {
 
-		this.invalid = false;
-
 		if( value.startsWith('#') ) {
 			if (value.length == 7 && /#[0-9a-fA-F]{6}/.test(value)) {
 				const hex = parseInt(value.slice(1), 16);
@@ -139,8 +137,10 @@ export class Color {
 			}
 		}
 
+		// red, to be seen, and marked as invalid
+		this.setRgb(255, 0, 0, 1);
 		this.invalid = true;
-		return this.setRgb(255, 0, 0, 1);
+		return this;
 	}
 
 	/**
@@ -205,23 +205,34 @@ export class Color {
 	 * @param r - Red component (0-255).
 	 * @param g - Green component (0-255).
 	 * @param b - Blue component (0-255).
-	 * @param a - Alpha component (0-1).
+	 * @param a - Alpha component (0-1, default 1.0).
 	 * @returns The current Color instance.
 	 */
-	setRgb(r: number, g: number, b: number, a: number): this {
-		this.rgb = [clamp(r | 0, 0, 255), clamp(g | 0, 0, 255), clamp(b | 0, 0, 255), clamp(a, 0, 1)];
+	setRgb(r: number, g: number, b: number, a = 1.0): this {
+		// a new color: valid
+		this.invalid = false;
+		// rounded: hsv gives 123.999 for 124; "| 0" makes a NaN 0
+		const c = ( v: number ) => clamp( Math.round( v ) | 0, 0, 255 );
+		this.rgb = [c(r), c(g), c(b), clamp(a, 0, 1)];
 		return this;
 	}
 
 	/**
 	 * Returns the CSS string representation of the color.
 	 * 
-	 * @param withAlpha - Whether to include the alpha channel (default: true if alpha < 1).
-	 * @returns The CSS color string (e.g. "rgb(255,0,0)" or "rgba(255,0,0,0.5)").
+	 * @param withAlpha - false (default): never the alpha; true: the alpha when the color is not opaque.
+	 * @returns The CSS color string (e.g. "rgb(255,0,0)" or "rgba(255,0,0,0.500)").
 	 */
-	toRgbString(withAlpha?: boolean): string {
+	toRgbString(withAlpha = false): string {
 		const _ = this.rgb;
-		return withAlpha === false || _[3] == 1 ? `rgb(${round(_[0])},${round(_[1])},${round(_[2])})` : `rgba(${round(_[0])},${round(_[1])},${round(_[2])},${_[3].toFixed(3)})`
+		const rgb = `${round(_[0])},${round(_[1])},${round(_[2])}`;
+
+		// an opaque color has no alpha to show
+		if( !withAlpha || _[3] >= 1 ) {
+			return `rgb(${rgb})`;
+		}
+
+		return `rgba(${rgb},${_[3].toFixed(3)})`;
 	}
 
 	/**

package/src/core/core_dragdrop.ts

@@ -175,12 +175,13 @@ class DragManager {
 	 */
 
 	private _startCheck() {
+		clearInterval( this.timer );
 
-		if (this.timer) {
-			clearInterval(this.timer);
-			this._check( );
-		}
+		// the target is told at once (and the one that was left)
+		this._check( );
 
+		// then checked again: over the children of a target, dragleave and dragover come
+		// in turn; it is left when no dragover came back in between
 		this.timer = setInterval( () => this._check(), 300 );
 	}