x4js 2.3.9 → 2.3.11

package/src/components/combobox/combobox.ts

@@ -38,6 +38,7 @@ interface DropdownEvents extends PopupEvents {
 
 interface DropdownProps extends Omit<PopupProps,"content"> {
 	items: ListItem[];
+	renderer?: ( item: ListItem ) => Component;
 }
 
 
@@ -49,7 +50,7 @@ export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 	constructor( props: DropdownProps ) {
 		super( props );
 
-		this._list = new Listbox( { items: props.items } );
+		this._list = new Listbox( { items: props.items, renderer: props.renderer } );
 		this.setContent( this._list );
 
 		this.addDOMEvent( "mousedown", ( ev: Event ) => { 
@@ -81,7 +82,7 @@ interface ComboboxEvents extends ComponentEvents {
 interface ComboboxProps extends Omit<ComponentProps,"content"> {
 	label?: string;
 	name?: string;
-	value?: string;
+	value?: ListboxID;
 	labelWidth?: number | string;
 	readonly?: boolean;
 	required?: boolean;
@@ -145,10 +146,9 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			const itm = list.getItem(sel);
 			if( itm ) {
 				list.select( sel, false );
+				this._input.setValue( itm.text as string );
 			}
 
-			this._input.setValue( itm.text as string );
-			
 			if( !this._prevent_close ) {
 				this._popup.show( false );
 			}
@@ -162,7 +162,7 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 			}
 		});
 
-		if( props.value ) {
+		if( props.value!==undefined && props.value!==null ) {
 			_select( props.value );
 		}
 

package/src/components/components.ts

@@ -1,3 +1,4 @@
+export * from "./autocomplete/autocomplete"
 export * from "./boxes/boxes"
 export * from "./breadcrumb/breadcrumb"
 export * from "./btngroup/btngroup"
@@ -5,6 +6,7 @@ export * from "./button/button"
 export * from "./calendar/calendar"
 export * from "./canvas/canvas"
 export * from "./canvas/canvas_ex"
+export * from "./chart/chart"
 export * from "./checkbox/checkbox"
 export * from "./colorinput/colorinput"
 export * from "./colorpicker/colorpicker"

package/src/components/header/header.ts

@@ -19,10 +19,15 @@ interface HeaderProps extends Omit<ComponentProps,"content"> {
 }
 
 const CELL_MW = 8;
+const MAX_COLS = 10;	// columns with a default name (ref-c1...ref-c10) handled by the listbox css
 
 /**
  * by default when a header item is resized, the 'target' style '--{name}-width' is updated
- * 
+ *
+ * a Listbox handles 10 columns at most: the width of its cells is given by the
+ * css classes ref-c1 to ref-c10 (text of the item, then sub_cols).
+ * above, give a name to the header item and handle '--{name}-width' in your own css.
+ *
  * @cssvar
  * ```
  * --header-background-hover
@@ -40,6 +45,10 @@ export class Header extends HBox<HeaderProps> {
 	constructor( props: HeaderProps ) {
 		super( props );
 
+		if( props.items?.some( ( x, index ) => !x.name && index>=MAX_COLS ) ) {
+			console.warn( `Header: ${props.items.length} columns, only the first ${MAX_COLS} get a width in a Listbox (ref-c1 to ref-c${MAX_COLS}).` );
+		}
+
 		this._els = props.items?.map( (x,index) => {
 
 			if( !x.name ) {
@@ -65,16 +74,42 @@ export class Header extends HBox<HeaderProps> {
 				this._calc_sizes( );
 			})
 
+			let resized = false;
+
 			sizer.on( "start", ( ) => {
-				//todo: remove flex on all cols
+				// freeze the flex columns: if they keep taking the remaining space, the left side
+				// of the resized cell moves, and the sizer (which measures from it) runs away
+				resized = false;
+
+				this._els.forEach( c => {
+					const flex = c.getInternalData( "flex" );
+					if( flex ) {
+						c.setInternalData( "saved-flex", flex );
+						c.setInternalData( "flex", 0 );
+						c.setInternalData( "width", Math.round( c.getBoundingRect( ).width ) );
+					}
+				});
 			} );
 
 			sizer.on( "stop", ( ) => {
-				//todo: restore flex
+				this._els.forEach( c => {
+					const flex = c.getInternalData( "saved-flex" );
+					if( flex ) {
+						c.setInternalData( "saved-flex", 0 );
+
+						// the resized column keeps its new width
+						if( c!==cell || !resized ) {
+							c.setInternalData( "flex", flex );
+						}
+					}
+				});
+
+				this._calc_sizes( );
 			} );
 
 			sizer.on( "resize", ( ev ) => {
 				//cell.setStyleValue( "flexGrow", "0" );
+				resized = true;
 				const sze = ev.size<CELL_MW ? CELL_MW : ev.size;
 				cell.setInternalData("flex",0);
 				cell.setInternalData("width",sze);

package/src/components/listbox/listbox.module.scss

@@ -131,11 +131,10 @@
             overflow: hidden; 
         }
 
-        .ref-c1 { width: var( --ref-c1-width); }
-        .ref-c2 { width: var( --ref-c2-width); }
-        .ref-c3 { width: var( --ref-c3-width); }
-        .ref-c4 { width: var( --ref-c4-width); }
-        .ref-c5 { width: var( --ref-c5-width); }
+        // 10 columns max (see Header)
+        @for $i from 1 through 10 {
+            .ref-c#{$i} { width: var( --ref-c#{$i}-width ); }
+        }
 
         //&:active{
             //background-color: var( --color-80 );

package/src/components/listbox/listbox.ts

@@ -35,7 +35,7 @@ export type ListboxID = number | string;
 export interface ListItem {
 	id: ListboxID;
 	text: string | UnsafeHtml;
-	sub_cols?: (string | UnsafeHtml | Component)[];	// extra columns
+	sub_cols?: (string | UnsafeHtml | Component)[];	// extra columns (9 max: 10 columns with text), a null value creates no cell
 
 	iconId?: string;
 	data?: any;

package/src/components/select/select.module.scss

@@ -1,4 +1,10 @@
 
+/**
+ * @cssvar
+ * --select-border
+ * --select-border-focus
+ * --select-background
+ */
 
 .x4select,
 ::picker(select) {
@@ -8,8 +14,8 @@
 	outline: none;
 
 	border-radius: 0;
-	border: 1px solid var( --border );
-	background-color: white;
+	border: 1px solid var( --select-border, var( --border ) );
+	background-color: var( --select-background, white );
 }
 
 .x4select {
@@ -21,23 +27,26 @@
     background-position: right 6px center;
     background-size: 12px 8px;
     padding-right: 23px;
-}
 
-//-- global saddly
-option {
-	padding: 5px;
-}
+	&:focus-visible {
+		border-color: var( --select-border-focus, var( --accent-background ) );
+	}
 
-option:checked {
- 	background-color: var( --accent-background );
-  	color: var( --accent-color );
-}
+	.select-option {
+		padding: 5px;
 
-option:hover {
- 	background-color: var( --accent-background-focus );
-  	color: var( --accent-color );
-}
+		&:checked {
+			background-color: var( --accent-background );
+			color: var( --accent-color );
+		}
+
+		&:hover {
+			background-color: var( --accent-background-focus );
+			color: var( --accent-color );
+		}
 
-option::checkmark {
-    display: none;
+		&::checkmark {
+			display: none;
+		}
+	}
 }

package/src/components/select/select.ts

@@ -16,8 +16,8 @@
 
 
 import { EventCallback } from '../../core/core_events';
-import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus  } from '../../core/component';
-import { class_ns } from '../../core/core_tools';
+import { Component, ComponentEvents, ComponentProps, EvChange, EvFocus  } from '../../core/component';
+import { class_ns, IComponentInterface, IFormElement, isArray } from '../../core/core_tools';
 
 import { ListboxID, ListItem } from '../components';
 
@@ -29,14 +29,15 @@ import "./select.module.scss"
 
 export interface SelectProps extends ComponentProps {
 	name?: string;
-	value: ListboxID;
+	value?: ListboxID;
 	items: ListItem[];
 	multiple?: boolean;
+	required?: boolean;
 	change?: EventCallback<EvChange>;
 	focus?: EventCallback<EvFocus>;
 }
 
-interface SelectEvents extends ComponentEvent {
+interface SelectEvents extends ComponentEvents {
 	focus: EvFocus;
 	change: EvChange;
 }
@@ -60,17 +61,21 @@ export class Select extends Component<SelectProps,SelectEvents> {
 			this.setAttribute( "name", props.name );
 		}
 
+		if( props.multiple ) {
+			this.setAttribute( "multiple", true );
+		}
+
+		if( props.required ) {
+			this.setAttribute( "required", true );
+		}
+
 		this.setItems( props.items );
-		
+
 		this.addDOMEvent( "blur", ( e ) => { this.on_focus(e,true);} );
 		this.addDOMEvent( "focus", ( e ) => { this.on_focus(e,false);} );
 		this.addDOMEvent( "input", ( e ) => { this.on_change(e as InputEvent); });
 
-		if( props.multiple ) {
-			this.setAttribute( "multiple", true );
-		}
-
-		if( props.value ) {
+		if( props.value!==undefined ) {
 			this.setValue( props.value );
 		}
 	}
@@ -107,14 +112,21 @@ export class Select extends Component<SelectProps,SelectEvents> {
  	 */
 
 	setItems( items: ListItem[] ) {
+		const sel = this._items ? this.getSelValues( ) : [];
+
 		this._items = [...items];
 		this.setContent( items.map( x => {
 			return new Component( {
 				tag: "option",
+				cls: x.cls ? "select-option "+x.cls : "select-option",
 				attrs: { value: x.id },
 				content: x.text,
 			});
 		} ));
+
+		if( sel.length ) {
+			this.setSelValues( sel );
+		}
 	}
 
 	/**
@@ -136,6 +148,44 @@ export class Select extends Component<SelectProps,SelectEvents> {
 		const el = (this.dom as HTMLSelectElement);
 		el.selectedIndex = this._items.findIndex( x => x.id===value );
 	}
+
+	/**
+	 * @returns all selected ids (multiple)
+	 */
+
+	public getSelValues( ) : ListboxID[] {
+		const el = (this.dom as HTMLSelectElement);
+		return Array.from( el.selectedOptions ).map( o => this._items[o.index].id );
+	}
+
+	/**
+	 * @param values ids to select (multiple)
+	 */
+
+	public setSelValues( values: ListboxID[] ) {
+		const el = (this.dom as HTMLSelectElement);
+		this._items.forEach( ( x, i ) => {
+			el.options[i].selected = values.includes( x.id );
+		});
+	}
+
+	/**
+	 *
+	 */
+
+	override queryInterface<T extends IComponentInterface>( name: string ): T {
+		if( name=="form-element" ) {
+			const i: IFormElement = {
+				getRawValue: ( ): any => { return this.props.multiple ? this.getSelValues() : this.getValue(); },
+				setRawValue: ( v: any ) => { isArray(v) ? this.setSelValues(v) : this.setValue(v); },
+				isValid: ( ) => { return (this.dom as HTMLSelectElement).checkValidity(); }
+			};
+
+			return i as unknown as T;
+		}
+
+		return super.queryInterface( name );
+	}
 }
 
 

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

@@ -97,6 +97,37 @@
 		&.align-right {
 			justify-content: end;
 		}
+
+		&.editing {
+			position: relative;
+		}
+
+		// inline editor: cover the cell
+		.cell-editor {
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			margin: 0;
+			padding: 0 4px;
+
+			font: inherit;
+			outline: none;
+			border: 2px solid var( --spreadsheet-row-background-sel );
+			border-radius: 0;
+
+			color: var( --spreadsheet-cell-color );
+			background-color: var( --spreadsheet-background );
+		}
+
+		&.align-center .cell-editor {
+			text-align: center;
+		}
+
+		&.align-right .cell-editor {
+			text-align: right;
+		}
 	}
 
 	.x4viewport {