x4js 2.3.17 → 2.3.19

package/src/components/rating/rating.ts

@@ -14,12 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, componentFromDOM, ComponentProps, EvChange } from '../../core/component';
+import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
 import { EventCallback } from '../../core/core_events';
 import { HBox } from '../boxes/boxes';
-import { Input } from '../input/input';
 import { Icon } from '../icon/icon';
-import { class_ns } from '../../core/core_tools';
+import { class_ns, IComponentInterface, IFormElement } from '../../core/core_tools';
 
 import icons from "../assets/icons"
 
@@ -54,50 +53,33 @@ export interface RatingProps extends ComponentProps {
 export class Rating extends HBox<RatingProps,RatingEventMap> {
 
 	private m_els: Component[];
-	private m_input: Input;
-	
+
 	constructor( props: RatingProps ) {
 		super( props );
 
-		props.steps = props.steps ?? 5;
+		// this.props: a copy of props (Box adds its tag)
+		this.props.steps = this.props.steps ?? 5;
+
+		// the name is on the rating: a Form finds it, and reads its value as a number (queryInterface)
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		this.addDOMEvent( 'click', (e) => this._on_click(e) );
 		this._update( );
 	}
 
+	// value: the count of stars that are lit, 0 for none
 	private _update( ) {
-		
 		const props = this.props;
-
-		let shape = props.icon ?? icons.star.solid;
-		let value = props.value ?? 0;
-
-		this.m_input = new Input( {
-			type: "text",
-			hidden: true,
-			name: props.name,
-			value: ''+value
-		} );
-
-		this.addDOMEvent( 'click', (e) => this._on_click(e) );
+		const shape = props.icon ?? icons.star.solid;
+		const value = props.value ?? 0;
 
 		this.m_els = [];
 		for( let i=0; i<props.steps; i++ ) {
-			
-			let cls = 'item';
-			if( i+1 <= value ) {
-				cls += ' checked';
-			}
-
-			let c = new Icon( { 
-				cls,
-				iconId: shape,
-			} );
-
-			c.setInternalData( "value", i );
-
-			this.m_els.push( c );
+			this.m_els.push( new Icon( { cls: i < value ? 'item checked' : 'item', iconId: shape } ) );
 		}
 
-		this.m_els.push( this.m_input );
 		this.setContent( this.m_els );
 	}
 
@@ -107,12 +89,7 @@ export class Rating extends HBox<RatingProps,RatingEventMap> {
 
 	setValue( v: number ) {
 		this.props.value = v;
-
-		for( let c=0; c<this.props.steps; c++ ) {
-			this.m_els[c].setClass( 'checked', this.m_els[c].getInternalData('value')<=v );
-		}
-
-		this.m_input.setValue( ''+this.props.value );
+		this.m_els.forEach( ( c, i ) => c.setClass( 'checked', i < v ) );
 	}
 
 	setSteps( n: number ) {
@@ -121,18 +98,31 @@ export class Rating extends HBox<RatingProps,RatingEventMap> {
 	}
 
 	setShape( icon: string ) {
-		this.removeClass( this.props.icon );
 		this.props.icon = icon;
+		this._update( );
 	}
 
+	// the star clicked: its svg, or the Icon itself
 	private _on_click( ev: MouseEvent ) {
-		let item = componentFromDOM( ev.target as HTMLElement );
-		item = item.parentElement( Icon );
-		
-		if( item ) {
-			this.setValue( item.getInternalData("value") );
+		const n = this.m_els.findIndex( c => c.dom.contains( ev.target as Node ) );
+		if( n>=0 ) {
+			// the star of the value, clicked again: none is lit
+			this.setValue( n+1===this.props.value ? 0 : n+1 );
+			this.fire( 'change', { value: this.props.value } );
 		}
+	}
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ) => this.getValue( ),
+				setRawValue: ( v: any ) => { this.setValue( +v ); },
+				isValid: ( ) => true,
+			};
 
-		this.fire( 'change', {value:this.props.value} );
-	} 
+			return i as unknown as T;
+		}
+
+		return super.queryInterface( name );
+	}
 }

package/src/components/slider/slider.ts

@@ -16,7 +16,7 @@
 
 import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvents, ComponentProps, EvChange } from '../../core/component';
-import { class_ns, Rect } from '../../core/core_tools';
+import { class_ns, IComponentInterface, IFormElement, Rect } from '../../core/core_tools';
 
 import { HBox } from '../boxes/boxes';
 import { Input } from '../input/input';
@@ -33,6 +33,8 @@ interface SliderProps extends ComponentProps {
 	max: number;
 	step?: number;
 	vertical?: boolean;
+	/** for a Form: it reads the value as a number */
+	name?: string;
 	change?: EventCallback<EvChange>;
 }
 
@@ -83,6 +85,12 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 
 		this.setAttribute( "tabindex", 0 );
 
+		// the name is on the slider: a Form finds it (queryInterface). The hidden range keeps
+		// the value: the browser brings it between min and max, on the step
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
 		this.setDOMEvents( {
 			pointerdown: ( ev ) => this._on_mousedown( ev ),
 			pointermove: ( ev ) => this._on_mousemove( ev ),
@@ -106,8 +114,8 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 	}
 
 	private _getMinMax( ) {
-		const min = parseInt( this._range.getAttribute( 'min' ) );
-		const max = parseInt( this._range.getAttribute( 'max' ) );
+		const min = parseFloat( this._range.getAttribute( 'min' ) );
+		const max = parseFloat( this._range.getAttribute( 'max' ) );
 		return [min,max];
 	}
 
@@ -134,15 +142,17 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			const [min,max] = this._getMinMax( );
 
 			this._range.setNumValue( min + (perc * (max-min) ) );
-			this._update( );
+			this._update( true );
 		}
 	}
 
-	private _update( ) {
+	// notify: a change made by the user (drag, arrows); not by the code, nor at the construction
+	private _update( notify = false ) {
 		const value = this._range.getNumValue( );
 		const [min,max] = this._getMinMax( );
 
-		let perc = max>min ? value / Math.abs(max-min) * 100 : 0;
+		// from min: min is at 0%, max at 100%
+		let perc = max>min ? (value-min) / (max-min) * 100 : 0;
 
 		if( !this.props.vertical ) {
 			this._thumb.setStyleValue( "left", perc+"%" );
@@ -155,7 +165,9 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			this._bar.setStyleValue( "height", perc+"%" );
 		}
 
-		this.fire( "change", { value } );
+		if( notify ) {
+			this.fire( "change", { value } );
+		}
 	}
 
 	private _on_mouseup( ev: PointerEvent ) {
@@ -184,7 +196,7 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 			}
 
 			this._range.setNumValue( this._range.getNumValue()+inc );
-			this._update( );
+			this._update( true );
 		}
 	}
 
@@ -202,4 +214,22 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 		this._range.setNumValue( v );
 		this._update( );
 	}
+
+	getValue( ) {
+		return this._range.getNumValue( );
+	}
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ) => this.getValue( ),
+				setRawValue: ( v: any ) => { this.setValue( +v ); },
+				isValid: ( ) => true,
+			};
+
+			return i as unknown as T;
+		}
+
+		return super.queryInterface( name );
+	}
 }

package/src/components/spreadsheet/spreadsheet.ts

@@ -348,6 +348,11 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			this.lock(false);
 		});
 
+		// out of the document: nothing is drawn, as before its first insertion
+		this.addDOMEvent("removed", () => {
+			this.lock(true);
+		});
+
 		this.addDOMEvent("resized", () => {
 			this._updateFlexs();
 			this._computeFullSize();
@@ -358,6 +363,139 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			this._on_key(e);
 		})
 
+		// the handlers of the grid itself are put once, here. _init builds what is
+		// inside the grid, each time it comes in the document
+
+		// WHEEL
+		this.addDOMEvent("wheel", (ev: WheelEvent) => {
+			// many rows: one pixel of the scroll bar is one row, wherever the pointer is
+			if (ev.deltaY && this._store && this._store.getRowCount() >= SCROLL_LIMIT) {
+				this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -1 : 1);
+				ev.stopPropagation();
+				ev.preventDefault();
+			}
+			else if (this._has_fixed && ev.deltaY) {
+				// wheel on fixed part
+				//	fixed part do not have scrollbar, so we need to handle it by hand
+				let t = ev.target as Node;
+				while (t != this.dom) {
+					if (t == this._vheader.dom) {
+						this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -this._row_height : this._row_height);
+						ev.stopPropagation();
+						ev.preventDefault();
+						break;
+					}
+
+					t = t.parentNode;
+				}
+			}
+		})
+
+		const targetCell = (e: MouseEvent) => {
+			let el = e.target as Element;
+			while (el && !el.classList.contains("cell")) {
+				el = el.parentElement;
+			}
+
+			if (el) {
+				const cel = componentFromDOM(el);
+				return {
+					ref: cel.getIntData("ref"),
+					row: cel.getInternalData("row"),
+					col: cel.getInternalData("col"),
+				}
+			}
+
+			return undefined;
+		}
+
+
+		// MOUSEDOWN
+		this.addDOMEvent("mousedown", (e) => {
+			if( !this._edit || this._inEditor(e) ) {
+				return;
+			}
+
+			// click on another cell while editing:
+			// validate now, rows may be rebuilt before the click event (and the click lost)
+			const ref = targetCell(e);
+			if( ref && ref.row!==undefined ) {
+				this._endEdit( true, true );
+
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection( false );
+					this._addSelection(ref.ref,true);
+				}
+
+				e.preventDefault( );
+			}
+		});
+
+		// CLICK
+		this.addDOMEvent("click", (e) => {
+			if( this._inEditor(e) ) {
+				return;
+			}
+
+			const ref = targetCell(e);
+			if (ref) {
+				//TODO: multiselection
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection( false );
+					this._addSelection(ref.ref,true);
+				}
+			}
+		});
+
+		// DBLCLICK
+		this.addDOMEvent("dblclick", (e) => {
+			if( this._inEditor(e) ) {
+				return;
+			}
+
+			const ref = targetCell(e);
+			if (ref) {
+				//TODO: multiselection
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection(false);
+					this._addSelection(ref.ref,true);
+				}
+
+				const dev: EvDblClick = { context: { row: ref.row, col: ref.col } };
+				this.fire( "dblClick", dev );
+
+				// checkboxes are toggled, other cells are edited
+				if( !dev.defaultPrevented && !this._toggleCell( ref.row, ref.col ) ) {
+					this.editCell( ref.row, ref.col );
+				}
+			}
+		});
+
+		// CONTEXT
+		this.addDOMEvent("contextmenu", (e) => {
+			// keep the native menu of the editor (copy/paste)
+			if( this._inEditor(e) ) {
+				return;
+			}
+
+			const ref = targetCell(e);
+			if (ref) {
+				//TODO: multiselection
+				if (!this._selection.has(ref.ref)) {
+					this._clearSelection( false );
+					this._addSelection(ref.ref, true );
+				}
+
+				this.fire( "contextMenu", { uievent: e, context: { row: ref.row, col: ref.col } } );
+			}
+			else {
+				this.fire( "contextMenu", { uievent: e, context: null } );
+			}
+
+			e.preventDefault();
+			e.stopPropagation();
+		});
+
 		if (props.store) {
 			this.setStore(props.store);
 		}
@@ -643,7 +781,8 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 		if (lock) {
 			this._lock++;
 		}
-		else {
+		// an unlock too many leaves it at 0: the grid goes on drawing
+		else if (this._lock > 0) {
 			if (--this._lock == 0 && this._dirty) {
 				this._update(true);
 			}
@@ -676,7 +815,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 +839,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 +1115,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 +1153,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 {
@@ -1095,136 +1260,6 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
 			this._update()
 		});
 
-		// WHEEL
-		this.addDOMEvent("wheel", (ev: WheelEvent) => {
-			if (ev.deltaY && this._store && this._store.getRowCount() >= SCROLL_LIMIT) {
-				this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -1 : 1);
-				ev.stopPropagation();
-				ev.preventDefault();
-			}
-
-			if (this._has_fixed && ev.deltaY) {
-				// wheel on fixed part
-				//	fixed part do not have scrollbar, so we need to handle it by hand
-				let t = ev.target as Node;
-				while (t != this.dom) {
-					if (t == this._vheader.dom) {
-						this._viewport.dom.scrollBy(0, ev.deltaY < 0 ? -this._row_height : this._row_height);
-						ev.stopPropagation();
-						ev.preventDefault();
-						break;
-					}
-
-					t = t.parentNode;
-				}
-			}
-		})
-
-		const targetCell = (e: MouseEvent) => {
-			let el = e.target as Element;
-			while (el && !el.classList.contains("cell")) {
-				el = el.parentElement;
-			}
-
-			if (el) {
-				const cel = componentFromDOM(el);
-				return {
-					ref: cel.getIntData("ref"),
-					row: cel.getInternalData("row"),
-					col: cel.getInternalData("col"),
-				}
-			}
-
-			return undefined;
-		}
-
-
-		// MOUSEDOWN
-		this.addDOMEvent("mousedown", (e) => {
-			if( !this._edit || this._inEditor(e) ) {
-				return;
-			}
-
-			// click on another cell while editing:
-			// validate now, rows may be rebuilt before the click event (and the click lost)
-			const ref = targetCell(e);
-			if( ref && ref.row!==undefined ) {
-				this._endEdit( true, true );
-
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
-					this._addSelection(ref.ref,true);
-				}
-
-				e.preventDefault( );
-			}
-		});
-
-		// CLICK
-		this.addDOMEvent("click", (e) => {
-			if( this._inEditor(e) ) {
-				return;
-			}
-
-			const ref = targetCell(e);
-			if (ref) {
-				//TODO: multiselection
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
-					this._addSelection(ref.ref,true);
-				}
-			}
-		});
-
-		// DBLCLICK
-		this.addDOMEvent("dblclick", (e) => {
-			if( this._inEditor(e) ) {
-				return;
-			}
-
-			const ref = targetCell(e);
-			if (ref) {
-				//TODO: multiselection
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection(false);
-					this._addSelection(ref.ref,true);
-				}
-
-				const dev: EvDblClick = { context: { row: ref.row, col: ref.col } };
-				this.fire( "dblClick", dev );
-
-				// checkboxes are toggled, other cells are edited
-				if( !dev.defaultPrevented && !this._toggleCell( ref.row, ref.col ) ) {
-					this.editCell( ref.row, ref.col );
-				}
-			}
-		});
-
-		// CONTEXT
-		this.addDOMEvent("contextmenu", (e) => {
-			// keep the native menu of the editor (copy/paste)
-			if( this._inEditor(e) ) {
-				return;
-			}
-
-			const ref = targetCell(e);
-			if (ref) {
-				//TODO: multiselection
-				if (!this._selection.has(ref.ref)) {
-					this._clearSelection( false );
-					this._addSelection(ref.ref, true );
-				}
-
-				this.fire( "contextMenu", { uievent: e, context: { row: ref.row, col: ref.col } } );
-			}
-			else {
-				this.fire( "contextMenu", { uievent: e, context: null } );
-			}
-
-			e.preventDefault();
-			e.stopPropagation();
-		});
-
 		this._updateFlexs();
 
 		this._fheader = this._buildColHeader(true);

package/src/components/switch/switch.ts

@@ -53,7 +53,8 @@ export class Switch extends HBox<SwitchProps> {
 			new Component( {
 				cls: "switch",
 				content: [
-					new Input( { type: "checkbox", id: inputId, name: props.name, checked: props.checked } ),
+					// value: sent by a <form> of the browser when checked; a Form of x4 reads a boolean
+					new Input( { type: "checkbox", id: inputId, name: props.name, value: props.value, 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

@@ -24,6 +24,8 @@
 
 .x4simpletextarea {
 
+		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;
 		outline: none;
 		font: inherit;
@@ -39,8 +41,10 @@
 			color: white;
 		}
 
-		&[resize=false] {
-			resize: none;
+		// as the one of an input
+		&::placeholder {
+			color: var( --input-placeholder );
+			font-style: italic;
 		}
 	}