x4js 2.3.16 → 2.3.18

package/src/components/input/input.ts

@@ -410,7 +410,12 @@ export class Input extends Component<InputProps,InputEvents> {
      */
 
 	public setNumValue( value: number, ndec = -1 ) {
-		
+
+		// no number (a field that is not filled): the field is emptied
+		if( value===undefined || value===null || isNaN( value ) ) {
+			return this.setValue( "" );
+		}
+
 		if( ndec==-2 && this.props.type=='number' ) {
 			const p = this.props as NumberProps;
 

package/src/components/keyboard/keyboard.ts

@@ -28,75 +28,166 @@ import icon_hide from "./eye-slash.svg";
 
 
 
-const kb_def: any = {
-    'fr-FR': {
-        lines: {
-            lower: [
-                "1 2 3 4 5 6 7 8 9 0",
-                "a z e r t y u i o p {2}",
-                "q s d f g h j k l m {3}",
-                "{4} w x c v b n , . {4}",
-                "{5} {6} ' {7}"
-            ],
-            upper: [
-                "! @ # $ % ^ & * ( ) _ +",
-                "A Z E R T Y U I O P {2}",
-                "Q S D F G H J K L M {3}",
-                "{4} W X C V B N ? : {4}",
-                "{5} {6} ' {7}",
-            ],
-            number: [
-				"1 2 3 {2}",
-				"4 5 6 {8}",
-				"7 8 9 {9}",
-				"0 . {3} {9}"
-            ],
-            date: [
-				"1 2 3 {2}",
-				"4 5 6 {8}",
-				"7 8 9 {9}",
-				"0 / {3} {9}"
-            ]
-        }
-    },
-    'en-GB': {
-        lines: {
-            lower: [
-                "1 2 3 4 5 6 7 8 9 0",
-                "a z e r t y u i o p {2}",
-                "q s d f g h j k l m {3}",
-                "{4} w x c v b n , . {4}",
-                "{5} {6} ' {7}"
-            ],
-            upper: [
-                "! @ # $ % ^ & * ( ) _ +",
-                "A Z E R T Y U I O P {2}",
-                "Q S D F G H J K L M {3}",
-                "{4} W X C V B N ? : {4}",
-                "{5} {6} ' {7}",
-            ],
-            number: [
-                "1 2 3 {2}",
-				"4 5 6 {8}",
-				"7 8 9 {9}",
-				"0 . {3} {9}"
-            ],
-			date: [
-				"1 2 3 {2}",
-				"4 5 6 {8}",
-				"7 8 9 {9}",
-				"0 / {3} {9}"
-            ]
-        }
-    },
-    'en-US': 'en-GB'
+/**
+ * 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.
+ *
+ * base: the countries where it is not QWERTY are those that
+ *   https://en.wikipedia.org/wiki/QWERTZ and /AZERTY list.
+ * extra: the main letters of the language in the CLDR of Unicode
+ *   (cldr-json, cldr-misc-full/main/<lang>/characters.json), without a..z.
+ */
+
+type KbBase = "azerty" | "qwerty" | "qwertz";
+
+interface KbLayout {
+	base: KbBase;
+	extra: string;
+}
+
+const kb_bases: Record<KbBase,string[]> = {
+	azerty: [ "a z e r t y u i o p", "q s d f g h j k l m", "w x c v b n" ],
+	qwerty: [ "q w e r t y u i o p", "a s d f g h j k l", "z x c v b n m" ],
+	qwertz: [ "q w e r t z u i o p", "a s d f g h j k l", "y x c v b n m" ],
+};
+
+// by language
+const kb_langs: Record<string,KbLayout> = {
+	cs: { base: "qwertz", extra: "á č ď é ě í ň ó ř š ť ú ů ý ž" },
+	da: { base: "qwerty", extra: "æ ø å" },
+	de: { base: "qwertz", extra: "ä ö ü ß" },
+	en: { base: "qwerty", extra: "" },
+	es: { base: "qwerty", extra: "á é í ñ ó ú ü" },
+	et: { base: "qwerty", extra: "õ ä ö ü š ž" },
+	fi: { base: "qwerty", extra: "å ä ö š ž" },
+	fr: { base: "azerty", extra: "é è ê ë à â æ ç î ï ô œ ù û ü ÿ" },
+	ga: { base: "qwerty", extra: "á é í ó ú" },
+	hr: { base: "qwertz", extra: "č ć đ š ž" },
+	hu: { base: "qwertz", extra: "á é í ó ö ő ú ü ű" },
+	it: { base: "qwerty", extra: "à è é ì ò ù" },
+	lt: { base: "qwerty", extra: "ą č ę ė į š ų ū ž" },
+	lv: { base: "qwerty", extra: "ā č ē ģ ī ķ ļ ņ š ū ž" },
+	mt: { base: "qwerty", extra: "à ċ è ġ ħ ì ò ù ż" },
+	nl: { base: "qwerty", extra: "á ä é ë í ï ó ö ú ü" },
+	pl: { base: "qwerty", extra: "ą ć ę ł ń ó ś ź ż" },
+	pt: { base: "qwerty", extra: "á à â ã ç é ê í ó ò ô õ ú" },
+	ro: { base: "qwerty", extra: "ă â î ș ț" },
+	sk: { base: "qwertz", extra: "á ä č ď é í ĺ ľ ň ó ô ŕ š ť ú ý ž" },
+	sl: { base: "qwertz", extra: "č š ž" },
+	sv: { base: "qwerty", extra: "å ä ö é à" },
+};
+
+// the countries that do not have the keyboard of their language
+const kb_countries: Record<string,Partial<KbLayout>> = {
+	"de-CH": { extra: "ä ö ü" },		// no ß in Switzerland
+	"fr-CH": { base: "qwertz" },
+	"it-CH": { base: "qwertz" },
+	"fr-LU": { base: "qwertz" },		// the Swiss French keyboard
+	"nl-BE": { base: "azerty" },
+};
+
+const kb_digits = "1 2 3 4 5 6 7 8 9 0";
+const kb_signs = "! @ # $ % ^ & * ( ) _ +";
+
+const kb_pads = {
+	number: [
+		"1 2 3 {2}",
+		"4 5 6 {8}",
+		"7 8 9 {9}",
+		"0 . {3} {9}"
+	],
+	date: [
+		"1 2 3 {2}",
+		"4 5 6 {8}",
+		"7 8 9 {9}",
+		"0 / {3} {9}"
+	]
+};
+
+const KB_MAX_EXTRA = 12;		// keys on a row of extra letters, as many as there are signs
+
+/**
+ * "de-CH", "de_ch", "de": the layout of the country, or else the one of
+ * its language. A language that is not known gets a QWERTY.
+ */
+
+function findLayout( locale: string ): KbLayout {
+	const [lang, country] = locale.replace( "_", "-" ).split( "-" );
+
+	let layout = kb_langs[lang.toLowerCase( )];
+	if( !layout ) {
+		layout = kb_langs.en;
+	}
+
+	if( country ) {
+		const own = kb_countries[lang.toLowerCase( ) + "-" + country.toUpperCase( )];
+		if( own ) {
+			layout = { ...layout, ...own };
+		}
+	}
+
+	return layout;
+}
+
+function upperKeys( line: string ): string {
+	return line.split( " " ).map( key => {
+		const up = key.toUpperCase( );
+		return up.length===1 ? up : key;		// ß has no upper case of one letter
+	} ).join( " " );
+}
+
+/**
+ * the extra letters, on rows of the same length
+ */
+
+function extraLines( extra: string ): string[] {
+	if( !extra ) {
+		return [];
+	}
+
+	const keys = extra.split( " " );
+	const count = Math.ceil( keys.length / KB_MAX_EXTRA );
+	const size = Math.ceil( keys.length / count );
+
+	const lines: string[] = [];
+	for( let i=0; i<keys.length; i+=size ) {
+		lines.push( keys.slice( i, i+size ).join( " " ) );
+	}
+
+	return lines;
+}
+
+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 [
+		upper ? kb_signs : kb_digits,
+		l1 + " {2}",
+		l2 + " {3}",
+		"{4} " + l3 + ( upper ? " ? : {4}" : " , . {4}" ),
+		...extra,
+		"{5} {6} ' {7}",
+	];
 }
 
 
 const RE_sel = /text|password|search|tel|url/i;
 
 interface KeyboardProps extends BoxProps {
-
+	/**
+	 * the language of the keys, with or without its country: "fr-FR",
+	 * "de-CH", "pl"... "fr-FR" when it is not given
+	 */
+	locale?: string;
 }
 
 /**
@@ -120,7 +211,7 @@ export class Keyboard extends HBox<KeyboardProps>
         super( { ...props, id: 'v-keyboard' } );
 
         this.mode   = 'lower';
-        this.locale = 'fr-FR';
+        this.locale = props.locale ?? 'fr-FR';
 		this.visible = false;
         
         document.addEventListener( 'focusin', (e) => this.handleFocus(e.target as Element,true), false );
@@ -152,6 +243,24 @@ export class Keyboard extends HBox<KeyboardProps>
 		this.setStyleVariable( '--keyboard-zoom', perc+'%' );
 	}
 
+	/**
+	 * Change the language of the keys.
+	 * @param locale - "fr-FR", "de-CH", "pl"... A country that has no keyboard
+	 * of its own gets the one of its language, a language that is not known a QWERTY.
+	 *
+	 * @example
+	 * keyboard.setLocale( "de-CH" );
+	 */
+
+	setLocale( locale: string ) {
+		this.locale = locale;
+
+		// drawn at least once
+		if( this.keyboard ) {
+			this._redraw( );
+		}
+	}
+
 	/**
 	 * 
 	 */
@@ -436,7 +545,14 @@ export class Keyboard extends HBox<KeyboardProps>
 	 */
 
     private _createContent( ) {
-        let     lines = kb_def[this.locale].lines[this.mode];
+        let     lines: string[];
+		if( this.mode=="number" || this.mode=="date" ) {
+			lines = kb_pads[this.mode];
+		}
+		else {
+			lines = letterLines( findLayout( this.locale ), this.mode=="upper" );
+		}
+
         let     result: Box[] = [];
         
 		for( let j=0; j<lines.length; j++ ) {

package/src/components/notification/notification.module.scss

@@ -18,7 +18,11 @@
 
 :root {
 	--notification-border: var( --border );
-	--notification-background: white;
+	--notification-background: var( --background-primary );
+
+	--notification-title-color: var( --text-primary );
+	--notification-text-color: var( --text-ternary );
+	--notification-button-color: var( --text-ternary );
 
 	--notification-icon-default: var( --accent-background );
 	--notification-icon-success: var( --success-background );
@@ -54,11 +58,12 @@
 		.title {
 			font-weight: bold;
 			padding: 6px 6px 3px 6px;
+			color: var( --notification-title-color );
 		}
 
 		.text {
 			padding: 3px 6px 6px 6px;
-			color: var( --color-gray-7 );
+			color: var( --notification-text-color );
 		}
 	}
 
@@ -81,7 +86,7 @@
 
 	.x4button {
 		height: 24px;
-		color: var( --color-gray-7 );
+		color: var( --notification-button-color );
 		border: none;
 
 		//&:hover {

package/src/components/notification/notification.ts

@@ -52,6 +52,9 @@ interface NotificationProps extends ComponentProps {
  * ```
  * --notification-border
  * --notification-background
+ * --notification-title-color
+ * --notification-text-color
+ * --notification-button-color
  * --notification-icon-default
  * --notification-icon-success
  * --notification-icon-danger

package/src/components/progress/progress.ts

@@ -21,8 +21,8 @@ import "./progress.module.scss";
 
 interface ProgressProps extends ComponentProps {
 	value: number;
-	min: number;
-	max: number;
+	min?: number;	// 0 when missing
+	max?: number;	// 100 when missing
 }
 
 /**
@@ -46,7 +46,11 @@ export class Progress extends Component<ProgressProps> {
 	}
 
 	setValue( value: number ) {
-		const perc = value / (this.props.max-this.props.min) * 100;
+		const min = this.props.min ?? 0;
+		const max = this.props.max ?? 100;
+
+		// where the value is between the two: min is 0%, max is 100%
+		const perc = (value-min) / (max-min) * 100;
 		this._bar.setStyleValue( "width", perc+"%" );
 	}
 }

package/src/components/spreadsheet/spreadsheet.ts

@@ -676,7 +676,9 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			const sizer = new CSizer("right");
 
 			sizer.on("stop", () => {
+				// the flex columns took what was left: the body gets the width of its columns
 				this._updateFlexs();
+				this._computeFullSize();
 			})
 
 			sizer.on("resize", (ev) => {
@@ -698,6 +700,24 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 				}
 			})
 
+			// a double click on the sizer: the column takes its share of the place
+			// that is left (flex 1). To stop taking it, the sizer is dragged
+			sizer.addDOMEvent("dblclick", (ev) => {
+				// both: the grid has a double click of its own
+				ev.stopPropagation();
+				ev.preventDefault();
+
+				// a fixed column is not in the place that is shared
+				if (fixed || cdata.flex) {
+					return;
+				}
+
+				cdata.flex = 1;
+
+				this._updateFlexs();
+				this._computeFullSize();
+			});
+
 			const cell = new Component({
 				cls: `cell`,
 				attrs: { "data-col": col },
@@ -956,6 +976,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 
 			const el = new Component({
 				cls: "cell",
+				attrs: { "data-col": col },		// the sizer of the column finds its cells by it
 				style: { width: cdata?.width ? cdata.width + "px" : undefined, justifyContent: align },
 				content
 			});
@@ -993,7 +1014,12 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		for (let x = 0; x < ccount; x++) {
 			const cdata = this._getCol(x);
 
-			if (!cdata.fixed && cdata.flex) {
+			// the fixed columns are not in the viewport: their width is not taken from its own
+			if (cdata.fixed) {
+				continue;
+			}
+
+			if (cdata.flex) {
 				flexc += cdata.flex;
 			}
 			else {

package/src/components/switch/switch.ts

@@ -28,6 +28,7 @@ interface SwitchProps extends ComponentProps {
 	label: string;
 	checked?: boolean;
 	value?: string;
+	name?: string;	// with it, a Form reads and writes the switch (a boolean)
 }
 
 /**
@@ -52,7 +53,7 @@ export class Switch extends HBox<SwitchProps> {
 			new Component( {
 				cls: "switch",
 				content: [
-					new Input( { type: "checkbox", id: inputId, checked: props.checked } ),
+					new Input( { type: "checkbox", id: inputId, name: props.name, checked: props.checked } ),
 					new Component( { cls: "track" } ),
 					new Component( { cls: "thumb" } ),
 				]

package/src/components/tag/tag.ts

@@ -34,8 +34,7 @@ export interface TagProps extends ComponentProps {
  * @cssvar
  * ```
  * --tag-border
- * --tag-border-focus
- * --tag-selection
+ * --tag-background
  * --tag-color
  * --tag-icon-color
  * ```

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

@@ -39,6 +39,12 @@
 			color: white;
 		}
 
+		// as the one of an input
+		&::placeholder {
+			color: var( --input-placeholder );
+			font-style: italic;
+		}
+
 		&[resize=false] {
 			resize: none;
 		}

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,25 +29,35 @@ 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+'' );
@@ -60,6 +70,22 @@ export class SimpleTextArea extends Component<TextAreaProps> {
 		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 +105,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 +147,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 +167,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/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;