x4js 2.3.21 → 2.3.23

package/src/components/settingsview/settingsview.ts

@@ -0,0 +1,289 @@
+/**
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|
+ *  /__/\__\   |_|
+ *
+ * @file settingsview.ts
+ * @author Etienne Cochard
+ *
+ * @copyright (c) 2026 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Component, ComponentEvent, ComponentEvents } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { class_ns } from '../../core/core_tools';
+
+import { BoxProps, HBox, VBox } from '../boxes/boxes';
+import { Input } from '../input/input';
+import { Label } from '../label/label';
+import { Listbox } from '../listbox/listbox';
+
+import { _tr } from '../../x4.js';
+
+import "./settingsview.module.scss"
+
+/**
+ *
+ */
+
+export interface SettingItemProps extends BoxProps {
+	title: string;
+	description?: string;
+	content: Component | Component[];	// its controls
+}
+
+/**
+ * one setting: its name, what it does, then its controls on a line that wraps.
+ * It has no value of its own: its controls keep theirs. To read and write them
+ * together, put the items in a Form and give the controls a name.
+ */
+
+@class_ns( "x4" )
+export class SettingItem extends VBox<SettingItemProps> {
+
+	constructor( props: SettingItemProps ) {
+		// the content goes under the name and the description, not in the box itself
+		super( { ...props, content: undefined } );
+
+		this.setContent( [
+			new Label( { cls: "name", text: props.title } ),
+			props.description ? new Label( { cls: "description", text: props.description } ) : null,
+			new HBox( { cls: "controls", content: props.content } ),
+		] );
+	}
+
+	/**
+	 * the text a search looks in: the name and the description
+	 */
+
+	getSearchText( ) {
+		return `${this.props.title} ${this.props.description ?? ""}`;
+	}
+}
+
+/**
+ * a section: a panel, its title on a band, then its content
+ */
+
+export interface SettingsSection {
+	id: string;
+	title: string;
+	description?: string;		// under the title
+	content: Component[];		// SettingItem, Form of SettingItem, or any component
+}
+
+export interface EvSectionChange extends ComponentEvent {
+	readonly section: string;	// the id of the section now at the top
+}
+
+export interface SettingsViewProps extends BoxProps {
+	sections?: SettingsSection[];
+	searchable?: boolean;			// a search field above the sections
+	searchPlaceholder?: string;		// _tr.global.settings.search when missing
+	noMatch?: string;				// shown when the search finds nothing; _tr.global.settings.nomatch when missing
+	sectionChange?: EventCallback<EvSectionChange>;
+}
+
+export interface SettingsViewEvents extends ComponentEvents {
+	sectionChange: EvSectionChange;
+}
+
+/**
+ * text compared without case nor accents
+ */
+
+function normalize( text: string ) {
+	return text.normalize( "NFD" ).replace( /[̀-ͯ]/g, "" ).toLowerCase( );
+}
+
+/**
+ * a page of settings, as the settings of VS Code: the summary of the sections
+ * on the left, the sections on the right, one after the other. A click in the
+ * summary brings its section to the top; the summary follows the scroll.
+ * With searchable, a field above them filters the settings.
+ *
+ * @cssvar
+ * ```
+ * --settingsview-toc-width
+ * --settingsview-section-background
+ * --settingsview-section-title-background
+ * --settingsview-hover-background
+ * --settingsview-marker
+ * ```
+ */
+
+@class_ns( "x4" )
+export class SettingsView<P extends SettingsViewProps = SettingsViewProps> extends VBox<P,SettingsViewEvents> {
+
+	// fields, not refs: refs belong to the classes that derive from this one
+	private _search: Input = null;
+	private _toc: Listbox;
+	private _view: VBox;
+	private _noMatch: Label;
+
+	// shown: kept by the search (isVisible is false too while the view is hidden)
+	private _sections: { section: SettingsSection, box: VBox, shown: boolean }[] = [];
+	private _current = "";		// the id of the section at the top
+
+	constructor( props: P ) {
+		super( props );
+		this.mapPropEvents( props, "sectionChange" );
+
+		this.setContent( [
+			props.searchable ? new HBox( {
+				cls: "search",
+				content: this._search = new Input( {
+					type: "text",
+					placeholder: props.searchPlaceholder ?? _tr.global.settings.search,
+					change: ( ) => this._filter( ),
+				} ),
+			} ) : null,
+
+			new HBox( {
+				cls: "body",
+				flex: true,
+				content: [
+					this._toc = new Listbox( {
+						cls: "toc",
+						items: [],
+						selectionChange: ( ev ) => this.showSection( ev.selection[0] as string ),
+					} ),
+					this._view = new VBox( { cls: "sections", flex: true } ),
+				],
+			} ),
+		] );
+
+		this._noMatch = new Label( { cls: "nomatch", text: props.noMatch ?? _tr.global.settings.nomatch, hidden: true } );
+		this._view.addDOMEvent( "scroll", ( ) => this._followScroll( ) );
+
+		// Escape empties the search
+		if( this._search ) {
+			this._search.addDOMEvent( "keydown", ( ev ) => {
+				if( ev.key == "Escape" && this._search.getValue( ) ) {
+					this._search.setValue( "" );
+					this._filter( );
+				}
+			} );
+		}
+
+		if( props.sections ) {
+			this.setSections( props.sections );
+		}
+	}
+
+	/**
+	 * the sections, in their order; for a class that builds them in its
+	 * constructor, after super( )
+	 */
+
+	setSections( sections: SettingsSection[] ) {
+		this._sections = sections.map( section => ( {
+			section,
+			shown: true,
+			box: new VBox( {
+				cls: "section",
+				content: [
+					new Label( { cls: "title", text: section.title } ),
+					section.description ? new Label( { cls: "description", text: section.description } ) : null,
+					...section.content,
+				],
+			} ),
+		} ) );
+
+		this._view.setContent( [ ...this._sections.map( s => s.box ), this._noMatch ] );
+		this._current = "";
+		this._filter( );
+	}
+
+	/**
+	 * brings a section to the top of the view
+	 */
+
+	showSection( id: string, smooth = true ) {
+		this._sections.find( s => s.section.id == id )?.box.scrollIntoView( { behavior: smooth ? "smooth" : "auto", block: "start" } );
+	}
+
+	/**
+	 * the id of the section at the top of the view
+	 */
+
+	getSection( ) {
+		return this._current;
+	}
+
+	/**
+	 * shows what the search finds; everything when it is empty. A section
+	 * whose title or description holds the words is shown whole; otherwise
+	 * only its settings that hold them, and what holds those settings.
+	 */
+
+	private _filter( ) {
+		const text = this._search ? this._search.getValue( ) : "";
+		const words = normalize( text ).split( /\s+/ ).filter( w => w );
+		const matches = ( text: string ) => {
+			const t = normalize( text );
+			return words.every( w => t.includes( w ) );
+		};
+
+		let found = false;
+		for( const s of this._sections ) {
+			const { section, box } = s;
+			const whole = !words.length || matches( `${section.title} ${section.description ?? ""}` );
+			let shown = whole;
+
+			for( const c of section.content ) {
+				const items = c instanceof SettingItem ? [c] : c.enumChildComponents( true ).filter( x => x instanceof SettingItem ) as SettingItem[];
+				let some = false;
+				for( const item of items ) {
+					const ok = whole || matches( item.getSearchText( ) );
+					item.show( ok );
+					some ||= ok;
+				}
+				// what holds no setting (a table, a text) is shown with its whole section only
+				c.show( whole || some );
+				shown ||= some;
+			}
+
+			s.shown = shown;
+			box.show( shown );
+			found ||= shown;
+		}
+
+		this._noMatch.show( !found );
+
+		// the summary lists the sections shown; the last one is as high as the
+		// view at least: a click in the summary can bring every section to the top
+		const shown = this._sections.filter( s => s.shown );
+		this._sections.forEach( s => s.box.setClass( "last", s == shown[shown.length - 1] ) );
+		this._toc.clearSelection( false );
+		this._toc.setItems( shown.map( s => ( { id: s.section.id, text: s.section.title } ) ) );
+		this._current = "";
+		this._followScroll( );
+	}
+
+	/**
+	 * the summary on the section at the top of the view; the first one while the view is hidden
+	 */
+
+	private _followScroll( ) {
+		const view = this._view.getBoundingRect( );
+
+		let current = "";
+		for( const { section, box, shown } of this._sections ) {
+			if( shown && ( !current || ( view.height && box.getBoundingRect( ).top <= view.top + 40 ) ) ) {
+				current = section.id;
+			}
+		}
+
+		this._toc.select( current, false );
+		if( current != this._current ) {
+			this._current = current;
+			this.fire( "sectionChange", { section: current } );
+		}
+	}
+}

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

@@ -333,7 +333,6 @@
 
 		.cell-out {
 			position: absolute;
-			background-color: var( --color-gray-0 );
 			width: 100%;
 			height: var( --row-height );
 		}

package/src/components/switch/switch.module.scss

@@ -18,9 +18,10 @@
 
 :root {
 	--switch-border: var( --border );
-	--switch-background: #eee;
+	--switch-background: var( --background-hover );
 	--switch-background-disabled: var( --disabled-background );
 	--switch-checked: var( --accent-background );
+	--switch-thumb: var( --background-primary );
 }
 
 .x4switch {
@@ -88,7 +89,7 @@
 			height: 1rem;
 
 			border-radius: 8px;
-			background-color: white;
+			background-color: var( --switch-thumb );
 			box-shadow: 0 0 2px rgba(0,0,0,0.5);
 
 			transition: left ease 0.2s;

package/src/components/switch/switch.ts

@@ -39,6 +39,7 @@ interface SwitchProps extends ComponentProps {
  * --switch-background
  * --switch-background-disabled
  * --switch-checked
+ * --switch-thumb
  * ```
  */
 

package/src/components/tabs/tabs.module.scss

@@ -3,6 +3,9 @@
 :root {
 	--tab-border-selected: var( --accent-background );
 	--tab-border-hover: var( --accent-background-hover );
+	--tab-color-hover: var( --text-primary );
+	--tab-color: var( --text-primary );
+	--tab-color-selected: var( --text-primary );
 }
 
 .x4tabs {
@@ -20,7 +23,7 @@
 		.x4button {
 			border: none;
 			border-bottom: 2px solid transparent;
-			color: var( --color-gray-7 );
+			color: var( --tab-color );
 			margin: 0;
 			outline: none;
 			transition: border-color 0.2s ease;
@@ -28,12 +31,12 @@
 			&.selected {
 				border-bottom-color: var( --tab-border-selected );
 				font-weight: bold;
-				color: var( --color-gray-9 );
+				color: var( --tab-color-selected );
 			}
 
 			&:hover {
 				background-color: unset;;
-				color: black;
+				color: var( --tab-color-hover );
 				border-bottom-color: var( --tab-border-hover );	
 			}
 

package/src/components/tabs/tabs.ts

@@ -146,6 +146,9 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  * ```
  * --tab-border-selected
  * --tab-border-hover
+ * --tab-color-hover
+ * --tab-color
+ * --tab-color-selected
  * ```
  */
 

package/src/components/tag/tag.module.scss

@@ -19,7 +19,7 @@
 	--tag-border: var( --border );
 	--tag-border-focus: var( --border-focus );
 	--tag-background: var( --accent-background );
-	--tag-color: black;
+	--tag-color: var( --text-primary );
 	--tag-icon-color: var( --tag-color );
 }
 

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

@@ -20,6 +20,9 @@
 	--textarea-border: var( --border );
 	--textarea-border-focus: var( --border-focus );
 	--textarea-selection: var( --accent-background );
+	--textarea-selection-color: var( --accent-color );
+	--textarea-background: var( --background-input );
+	--textarea-color: var( --text-primary );
 }
 
 .x4simpletextarea {
@@ -36,6 +39,10 @@
 		outline: none;
 		font: inherit;
 
+		// as the ones of an input
+		background-color: var( --textarea-background );
+		color: var( --textarea-color );
+
 		border: 1px solid var( --textarea-border );
 
 		&:focus {
@@ -44,7 +51,7 @@
 
 		&::selection {
 			background-color: var( --textarea-selection );
-			color: white;
+			color: var( --textarea-selection-color );
 		}
 
 		// as the one of an input

package/src/components/textarea/textarea.ts

@@ -136,6 +136,9 @@ export class SimpleTextArea extends Component<SimpleTextAreaProps,TextAreaEvents
  * --textarea-border
  * --textarea-border-focus
  * --textarea-selection
+ * --textarea-selection-color
+ * --textarea-background
+ * --textarea-color
  * ```
  */
 

package/src/components/themes.scss

@@ -44,27 +44,39 @@ $color--interval: 8.4%;
 	--color-success-a60: #{color.adjust(#10c01f, $lightness: -10%)};
 }
 
+// the greys are mixes of the two ends of the scale: #999 with a0 white and a100 black,
+// light on dark when a theme reverses the scale
+
 :root {
 	// Backgrounds
 	--background-primary: var(--color-primary-a0);
 	--background-secondary: var(--color-primary-a10);
-	--background-ternary: #f4f4f4;
+	--background-ternary: color-mix(in srgb, var(--color-primary-a100) 4.3%, var(--color-primary-a0));		// #f4f4f4
+	--background-hover: color-mix(in srgb, var(--color-primary-a100) 6.7%, var(--color-primary-a0));		// #eee
+	--background-active: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));		// #ccc
+	--background-input: color-mix(in srgb, var(--color-primary-a0) 60%, transparent);					// white at 60%
 
 	// Texts
 	--text-primary: var(--color-primary-a100);
-	--text-secondary: #999;
-	--text-ternary: #666;
+	--text-secondary: color-mix(in srgb, var(--color-primary-a100) 40%, var(--color-primary-a0));		// #999
+	--text-ternary: color-mix(in srgb, var(--color-primary-a100) 60%, var(--color-primary-a0));		// #666
 
 	// Disabled
-	--disabled-background: #ccc;
-	--disabled-color: white;
-	--disabled-color-dark: #aaa;
+	--disabled-background: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));	// #ccc
+	--disabled-color: var(--color-primary-a0);
+	--disabled-color-dark: color-mix(in srgb, var(--color-primary-a100) 33.3%, var(--color-primary-a0));	// #aaa
+	--disabled-color-light: color-mix(in srgb, var(--color-primary-a100) 20%, var(--color-primary-a0));	// #ccc
+
+	// Icons
+	--icon-color: color-mix(in srgb, var(--color-primary-a100) 44%, transparent);			// black at 44%
+	--icon-color-active: color-mix(in srgb, var(--accent-color) 64%, transparent);			// white at 64%
 
 	// Accents
 	--accent-background: var(--color-primary-a60);
 	--accent-background-hover: var(--color-primary-a55);
 	--accent-background-focus: var(--color-primary-a70);
 	--accent-background-active: var(--color-primary-a80);
+	--accent-background-light: color-mix(in srgb, var(--accent-background) 25%, transparent);		// the accent at 25%
 
 	--accent-color: var(--color-primary-a0);
 	--accent-color-hover: var(--color-primary-a0);
@@ -72,19 +84,20 @@ $color--interval: 8.4%;
 	--accent-color-active: var(--color-primary-a0);
 
 	// Borders
-	--border: #e1e1e1;
-	--border-light: #eaeaea;
-	--border-hover: #c2c2c2;
+	--border: color-mix(in srgb, var(--color-primary-a100) 11.8%, var(--color-primary-a0));			// #e1e1e1
+	--border-light: color-mix(in srgb, var(--color-primary-a100) 8.2%, var(--color-primary-a0));		// #eaeaea
+	--border-hover: color-mix(in srgb, var(--color-primary-a100) 23.9%, var(--color-primary-a0));		// #c2c2c2
 	--border-focus: var(--accent-background);
 
+	// the red, orange and green do not follow the scale: their text stays white
 	--alert-background: var(--color-danger-a50);
 	--alert-background-active: var(--color-danger-a60);
-	--alert-color: var(--color-primary-a0);
+	--alert-color: #ffffff;
 
 	--warning-background: var(--color-warning-a50);
-	--warning-color: var(--color-primary-a0);
+	--warning-color: #ffffff;
 
 	--success-background: var(--color-success-a50);
 	--success-background-active: var(--color-success-a60);
-	--success-color: var(--color-primary-a0);
+	--success-color: #ffffff;
 }

package/src/components/tickline/tickline.module.scss

@@ -18,7 +18,7 @@
 	--tickline-axis-color: var( --border );
 	--tickline-color: var( --accent-color );
     --tickline-width: 1px;
-	--tickline-background: white;
+	--tickline-background: var( --background-primary );
 }
 
 .x4tickline {

package/src/components/tooltips/tooltips.scss

@@ -18,14 +18,15 @@
 
 :root {
 	--tooltip-caption-background: var( --color-primary-a70 );
-	--tooltip-caption-color: white;
+	--tooltip-caption-color: var( --color-primary-a0 );
 
-	--tooltip-icon-background: white;
+	--tooltip-icon-background: var( --color-primary-a0 );
 	--tooltip-icon-color: var( --color-primary-a70 );
 
 	--tooltip-background: var( --color-primary-a10 );	//white;
 	--tooltip-color: var( --color-primary-a90 );
 	--tooltip-border: var( --color-primary-a20 );
+	--tooltip-image-background: var( --background-primary );
 }
 
 .x4tooltip {
@@ -67,7 +68,7 @@
 	img {
 		max-width: 100px;
 		max-height: 50px;
-		background-color: white;
+		background-color: var( --tooltip-image-background );
 		margin: 4px;
 	}
 }

package/src/components/tooltips/tooltips.ts

@@ -104,6 +104,7 @@ function closeTT( ) {
  * --tooltip-background
  * --tooltip-color
  * --tooltip-border
+ * --tooltip-image-background
  * ```
  */
 

package/src/components/treeview/treeview.module.scss

@@ -17,10 +17,12 @@
 
 :root {
 
-	--treeview-background: white;
+	--treeview-background: var( --background-primary );
+
+	--treeitem-color: var( --text-primary );
 
 	--treeitem-backgound-hover: var( --background-secondary );
-	--treeitem-color-hover: var( );
+	--treeitem-color-hover: var( --text-primary );
 
 	--treeitem-background-sel: var( --accent-background );
 	--treeitem-color-sel: var( --accent-color );
@@ -97,6 +99,8 @@
 
 					&:hover {
 						background-color: var( --treeitem-backgound-hover );
+						--label-color: var( --treeitem-color-hover );
+						--label-icon-color: var( --treeitem-color-hover );
 					}
 
 					&.selected {

package/src/components/treeview/treeview.ts

@@ -72,6 +72,7 @@ export interface TreeviewEvents extends ComponentEvents {
  * @cssvar
  * ```
  * --treeview-background
+ * --treeitem-color
  * --treeitem-backgound-hover
  * --treeitem-color-hover
  * --treeitem-background-sel