x4js 2.2.53 → 2.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.53",
+  "version": "2.2.55",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/boxes/boxes.module.scss

@@ -5,7 +5,7 @@
  *   /    \____   _|  
  *  /__/\__\   |_|
  * 
- * @file boxes.module.scss
+ * @file boxes.ts
  * @author Etienne Cochard 
  * 
  * @copyright (c) 2026 R-libre ingenierie
@@ -14,47 +14,529 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-@use "../shared.scss";
+import { asap, class_ns, isArray, isNumber } from '../../core/core_tools';
+import { Component, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
+import { EventCallback } from '../../core/core_events';
 
-.x4box {
-	min-width: 0;
-	min-height: 0;
-	flex-shrink: 0;
+import "./boxes.module.scss";
+
+export interface BoxProps extends ComponentProps {
+	/** Optional HTML tag to use for the box. */
+	tag?: string;
+}
+
+/**
+* A generic container component for grouping and laying out child components.
+ *
+ * The `refs` object is a typed directory of the children you need to reach
+ * again later. Assign a child to `refs` as you build the content: the
+ * assignment expression evaluates to the component itself, so it can be
+ * inlined directly in the content array.
+ * 
+ * @example
+ * using refs: in your code, you can type
+ * 
+ * class MyBox extends Box {
+ *   declare refs: {
+ *   	a: Combobox;
+ *      b: Input;
+ *   }
+ * 
+ *   constructor( props ) {
+ *      super( props );
+ *      
+ *      this.setContent( [
+ *          this.refs.a = new ComboBox( { ... } );
+ *          this.refs.b = new Input( { ... } );
+ *      ])
+ * 
+ * 	 onSomeEvent() {
+ *     this.refs.a.getValue();
+ *   }
+ * }
+ * 
+ * 
+ * 
+ */
+
+@class_ns( "x4" )
+export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+	protected refs: Record<string,Component> = {};
 }
 
-.x4hbox {
-	@extend %hbox;
-	&.align-start {
-		align-items: start;
+
+/**
+ * A horizontal box layout component.
+ * Arranges child components in a horizontal line.
+ */
+
+@class_ns( "x4" )
+export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+}
+
+/**
+ * A vertical box layout component.
+ * Arranges child components in a vertical stack.
+ * The CSS class for this component is automatically generated as `x4vbox`.
+ */
+
+@class_ns( "x4" )
+export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+	constructor( p: P ) {
+		super( p );
 	}
 }
 
-.x4vbox {
-	@extend %vbox;
+
+type ContentBuilder = ( ) => Component;
+
+
+/**
+ * Represents an item in a {@link StackBox}.
+ */
+
+interface StackItem {
+	/** Unique name for the stack item. */
+	name: string;
+	/** Content of the stack item, either a component or a builder function. */
+	content: Component | ContentBuilder;
+	title?: string;
 }
 
-.x4stackbox {
-	display: flex;
+/**
+ * Events specific to the {@link StackBox} component.
+ */
+
+interface StackeBoxEvents extends ComponentEvents {
+	/** Fired when the current page changes. */
+	pageChange?: EvSelectionChange;
+}
+
+/**
+ * Properties for the {@link StackBox} component.
+ */
+
+export interface StackBoxProps extends Omit<ComponentProps,"content"> {
+	/** Name of the default page to display. */
+	default: string;
+
+	/** List of stack items. */
+	items: StackItem[];
+
+	/** Callback for page change events. */
+	pageChange?: EventCallback<EvSelectionChange>;
+}
+
+
+interface StackItemEx extends StackItem {
+	page: Component;
+}
+
+/**
+ * A stack of widgets where only one widget is visible at a time.
+ * The CSS class for this component is automatically generated as `x4stackbox`.
+ */
+
+@class_ns( "x4" )
+export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeBoxEvents = StackeBoxEvents>  extends Box<StackBoxProps,StackeBoxEvents> {
 	
-	&>* {
-		@extend %fit;
-		position: relative !important;
+	protected _items: StackItemEx[];
+	protected _cur: number;
+
+	constructor( props: StackBoxProps ) {
+		super( props );
+
+		this.mapPropEvents( props, "pageChange" );
+
+		this._items = props.items?.map( itm => {
+			return { ...itm, page: null as any};
+		});
+
+		if( props.default ) {
+			this.select( props.default );
+		}
+		else if( this._items.length ) {
+			this.select( this._items[0].name );
+		}
+	}
+
+	/**
+     * Adds a new item to the stack.
+     * @param item - The item to add.
+     */
+
+	addItem( item: StackItem ) {
+		this._items.push( {
+			name: item.name,
+			content: item.content,
+			page: null
+		});
+	}
+
+	/**
+     * Removes an item from the stack by its name.
+     * @param name - The name of the item to remove.
+     */
+
+	removeItem( name: string ) {
+		const index = this._items.findIndex( x => x.name==name );
+		if( index>=0 ) {
+			const pg = this._items[index];
+			if( pg?.page ) {
+				this.removeChild( pg.page );
+			}
+
+			this._items.splice( index, 1 );
+		}
+	}
+
+	/**
+     * Selects a page by its name.
+     * @param name - The name of the page to select.
+     * @returns The selected page component, if any.
+     */
+	
+	select( name: string ) {
+		let sel = this.query( `:scope > .selected` );
+		if( sel ) {
+			sel.setClass( "selected", false );
+			(sel as any).deactivate?.( );
+		}
+
+		this._cur = this._items.findIndex( x => x.name==name );
+		const pg = this._items[this._cur];
+
+		if( pg ) {
+			if( !pg.page ) {
+				pg.page = this._createPage( pg );
+				this.appendContent( pg.page );
+			}
+
+			sel = pg.page;
+			if( sel ) {
+				(sel as any).activate?.( );
+				sel.setClass( "selected", true );
+			}
+
+			asap( ( ) => this.fire( "pageChange", { selection: [pg.name], empty: !sel } ) );
+		}
+
+		return pg?.page;
+	}
+
+	/**
+	 * 
+	 */
+
+	private _createPage( page: StackItemEx ) {
+		
+		let content: Component;
+		if( page.content instanceof Function ) {
+			content = page.content( );
+			page.content = content;	// keep it
+		}
+		else {
+			content = page.content;
+		}
+		
+		content?.setData( "stackname", page.name );
+		return content;
+	}
+
+	/**
+     * Retrieves a page by its name.
+     * @param name - The name of the page to retrieve.
+     * @returns The page content, if found.
+     */
+	
+	getPage( name: string ) {
+		const pg = this._items.find( x => x.name==name );
+		return pg ? pg.content : null;
+	}
+
+	/**
+     * Gets the total number of pages in the stack.
+     * @returns The number of pages.
+     */
+
+	getPageCount( ) {
+		return this._items.length;
+	}
+
+	/**
+     * Enumerates the names of all pages in the stack.
+     * @returns An array of page names.
+     */
+
+	enumPageNames( ) {
+		return this._items.map( x => x.name );
+	}
+
+	/**
+     * Retrieves a stack item by its name.
+     * @param name - The name of the item to retrieve.
+     * @returns The stack item, if found.
+     */
+
+	getItem( name: string ) {
+		const pg = this._items.find( x => x.name==name );
+		return pg;
+	}
+
+	/**
+     * Gets the name of the currently selected page.
+     * @returns The name of the current page, if any.
+     */
+
+	getCurPage( ) {
+		const c = this._items[this._cur];
+		return c?.name;
+	}
+}
+
+// :: ASSIST BOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+/**
+ * A specialized stack box for assisted navigation, such as wizards or carousels.
+ * The CSS class for this component is automatically generated as `x4assistbox`.
+ */
+
+@class_ns( "x4" )
+export class AssistBox extends StackBox {
+
+	/**
+     * Selects the next or previous page in the stack.
+     * @param nxt - If `true`, selects the next page; otherwise, selects the previous page.
+     */
+
+	selectNextPage( nxt = true ) {
+		let p;
+		if( nxt && this._cur<this._items.length-1 ) {
+			p = this._items[this._cur+1];
+		}
+		else if( !nxt && this._cur>0 ) {
+			p = this._items[this._cur-1];
+		}
+
+		if( p ) {
+			this.select( p.name );
+		}
 	}
 
-	&>*:not(.selected) {
-		display: none !important;
+	/**
+     * Checks if the current page is the first page.
+     * @returns `true` if the current page is the first page.
+     */
+
+	isFirstPage( ) {
+		return this._cur==0;
+	}
+
+	/**
+     * Checks if the current page is the last page.
+     * @returns `true` if the current page is the last page.
+     */
+
+	isLastPage( ) {
+		return this._cur==this._items.length-1;
 	}
 }
 
-.x4gridbox {
-	display: grid;
+
+
+// :: GRIDBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+interface GridBoxItem {
+	row: number;	// starts at 0
+	col: number;	// starts at 0
+	item: Component;
 }
 
-.x4masonrybox {
-	display: grid;
-	grid-gap: 10px;
-	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
-	grid-auto-rows: 10px;
+export interface GridBoxProps extends Omit<BoxProps,"content"> {
+	rows?: number | string | string[];
+	columns?: number | string | string[];
+	items?: GridBoxItem[];
+}
 
-	overflow: hidden;
+/**
+ * Grid-based layout container.
+ * Auto-generates CSS class: `x4gridbox`.
+ */
+
+@class_ns("x4")
+export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+
+	constructor( props: P ) {
+		super( props );
+
+		if( props.rows!==undefined ) {
+			this.setRows( props.rows );
+		}
+
+		if( props.columns!==undefined ) {
+			this.setCols( props.columns );
+		}
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	/**
+     * Sets grid rows (e.g., `2`, `"1fr 2fr"`, `["1fr", "2fr"]`).
+     * @param r - Rows definition.
+     */
+
+	setRows( r: number | string | string[] ) {
+		if( isArray(r) ) {
+			r = r.join( " " );
+		}
+		else if( isNumber(r) ) {
+			r = `repeat( ${r}, 1fr )`;
+		}
+
+		this.setStyleValue( "gridTemplateRows", r );
+	}
+
+	/**
+     * Sets grid columns (e.g., `3`, `"1fr 1fr"`, `["auto", "1fr"]`).
+     * @param r - Columns definition.
+     */
+
+	setCols( r: number | string | string[] ) {
+		if( isArray(r) ) {
+			r = r.join( " " );
+		}
+		else if( isNumber(r) ) {
+			r = `repeat( ${r}, 1fr )`;
+		}
+
+		this.setStyleValue( "gridTemplateColumns", r );
+	}
+
+	/**
+     * Sets the number of rows.
+     * @param n - Row count.
+     */
+
+	setRowCount( n: number ) {
+		this.setStyleValue( "gridTemplateRows", `repeat(${n})` );
+	}
+
+	/**
+     * Sets the number of columns.
+     * @param n - Column count.
+     */
+
+	setColCount( n: number ) {
+		this.setStyleValue( "gridTemplateColumns", `repeat(${n})` );
+	}
+
+	/**
+     * Sets grid template areas (e.g., `["a a", "b c"]`).
+     * @param t - Template strings.
+     */
+
+	setTemplate( t: string[] ) {
+		this.setAttribute( "grid-template-area", t.map( x => '"' + x + '"' ).join(" ") );
+	}
+
+	/**
+     * Places items at specific grid positions.
+     * @param items - Array of `{row, col, item}`.
+     */
+
+	setItems( items: GridBoxItem[] ) {
+		items.forEach( x => {
+			x.item.setStyle( {
+				gridColumn: (x.col+1)+"",
+				gridRow: (x.row+1)+"",
+			} );
+		});
+
+		this.setContent( items.map( x => x.item ) );
+	}
+}
+
+
+// :: MASONRY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+
+interface MasonryProps extends Omit<BoxProps,"content"> {
+	items: Component[];
+}
+
+/**
+ * Masonry-style layout (Pinterest-like).
+ * Auto-generates CSS class: `x4masonrybox`.
+ */
+
+@class_ns("x4")
+export class MasonryBox extends Box<MasonryProps> {
+
+	constructor(props: MasonryProps ) {
+		super(props);
+
+		this.addDOMEvent( 'resized', () => {
+			this.resizeAllItems( );
+		});
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	/**
+     * Resizes a single masonry item.
+     * @param item - Item to resize.
+     */
+
+	resizeItem(item: Component) {
+		const style = this.getComputedStyle();
+
+		const rowHeight = parseInt(style['gridAutoRows']);
+		const rowGap = parseInt(style['rowGap']);
+
+		let content = item.query('.content');
+		if( !content ) {
+			content = item;
+		}
+
+		if (content && (rowHeight + rowGap)) {
+			const rc = content.getBoundingRect();
+			const rowSpan = Math.ceil( (rc.height + rowGap) / (rowHeight + rowGap) );
+			item.setStyleValue('gridRowEnd', "span " + rowSpan);
+		}
+	}
+	  
+	/**
+     * Resizes all items to fit the grid.
+     */
+
+	resizeAllItems( ) {
+		const els = this.queryAll( ".item" );
+		els.forEach( itm => {
+			this.resizeItem( itm );
+		} );
+	}
+
+	/**
+     * Sets masonry items.
+     * @param items - Array of components.
+     */
+
+	setItems( items: Component[] ) {
+		const els = items.map( x => {
+			return new Box( {
+				cls: 'item',
+				content: x
+			} );
+		});
+		
+		this.setContent( els );
+	}
 }
+

package/src/components/boxes/boxes.ts

@@ -26,19 +26,48 @@ export interface BoxProps extends ComponentProps {
 }
 
 /**
- * A generic container component for grouping and laying out child components.
- * The CSS class for this component is automatically generated as `x4box`.
+* A generic container component for grouping and laying out child components.
+ *
+ * The `refs` object is a typed directory of the children you need to reach
+ * again later. Assign a child to `refs` as you build the content: the
+ * assignment expression evaluates to the component itself, so it can be
+ * inlined directly in the content array.
+ * 
+ * @example
+ * using refs: in your code, you can type
+ * 
+ * class MyBox extends Box {
+ *   declare refs: {
+ *   	a: Combobox;
+ *      b: Input;
+ *   }
+ * 
+ *   constructor( props ) {
+ *      super( props );
+ *      
+ *      this.setContent( [
+ *          this.refs.a = new ComboBox( { ... } );
+ *          this.refs.b = new Input( { ... } );
+ *      ])
+ * 
+ * 	 onSomeEvent() {
+ *     this.refs.a.getValue();
+ *   }
+ * }
+ * 
+ * 
+ * 
  */
 
 @class_ns( "x4" )
 export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+	protected refs: Record<string,Component> = {};
 }
 
 
 /**
  * A horizontal box layout component.
  * Arranges child components in a horizontal line.
- * The CSS class for this component is automatically generated as `x4hbox`.
  */
 
 @class_ns( "x4" )

package/src/components/header/header.ts

@@ -7,7 +7,7 @@ import { CSizer } from '../sizers/sizer';
 import "./header.module.scss"
 
 interface HeaderItem {
-	name: string;
+	name?: string;	// default to ref-cx
 	title: string;
 	iconId?: string;
 	width?: number;	// <0 for flex
@@ -15,7 +15,7 @@ interface HeaderItem {
 
 interface HeaderProps extends Omit<ComponentProps,"content"> {
 	items: HeaderItem[]
-	target?: Component;	// target element to set header col variable width var( --hdr-item-{name}-width )
+	target?: Component;	// target element to set header col variable width var( --{name}-width ) parent element if not set
 }
 
 /**
@@ -38,7 +38,12 @@ export class Header extends HBox<HeaderProps> {
 	constructor( props: HeaderProps ) {
 		super( props );
 
-		this._els = props.items?.map( x => {
+		this._els = props.items?.map( (x,index) => {
+
+			if( !x.name ) {
+				x.name = `ref-c${index+1}`;
+			}
+
 			const cell = new Label( { cls: "cell", text: x.title, icon: x.iconId } );
 			const sizer = new CSizer( "right" );
 			
@@ -126,7 +131,13 @@ export class Header extends HBox<HeaderProps> {
 			c.setWidth( width );
 
 			const item = c.getInternalData<HeaderItem>( 'data' );
+
+			if( !this.props.target ) {
+				this.parentElement().setStyleVariable( `--${item.name}-width`, width + "px");
+			}
+			else {
 			this.props.target?.setStyleVariable( `--${item.name}-width`, width + "px");
+			}
 			
 			fullw += width;
 		} );

package/src/components/label/label.module.scss

@@ -53,6 +53,16 @@
 		&:empty {
 			display: none;
 		}
+
+		code {
+			padding: 0.2em 0.4em;
+			margin: 0;
+			font-size: 95%;
+			white-space: break-spaces;
+			background-color: var(--background-ternary);
+			border-radius: 6px;
+			border: 1px solid var(--border);
+		}
 	}
 	
 	#icon {
@@ -81,6 +91,16 @@
 	text-align: left;
 	&.al-center { text-align: center; }
 	&.al-right { text-align: right; }
+
+	code {
+		padding: 0.2em 0.4em;
+		margin: 0;
+		font-size: 95%;
+		white-space: break-spaces;
+		background-color: var(--background-ternary);
+		border-radius: 6px;
+		border: 1px solid var(--border);
+	}
 }
 
 [disabled] .x4label,

package/src/components/panel/panel.module.scss

@@ -40,6 +40,8 @@
 	}
 
 	& > .body {
+		flex-grow: 1;
+
 		position: relative;
 		left: 0;
 		top: 0;

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

@@ -12,6 +12,17 @@
 	background-color: white;
 }
 
+.x4select {
+	appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    background-size: 12px 8px;
+    padding-right: 23px;
+}
+
 //-- global saddly
 option {
 	padding: 5px;

package/src/components/sizers/sizer.ts

@@ -112,6 +112,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 		let nr: any = {};
 		let horz = true;
+		let size = 0;
 
 		//const center = this._ref.hasClass("center");
 		//if( center ) {
@@ -124,38 +125,69 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 		if( this._type.includes("top") ) {
 			nr.top = pt.y,
-			nr.height = (rc.top+rc.height)-pt.y;
+			size = nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
 		
 		if( this._type=="vsize-next" ) {
-			nr.height = (rc.top+rc.height)-pt.y;
+			size = nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
 		
 		if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
-			nr.height = (pt.y-rc.top);
+			size = nr.height = (pt.y-rc.top);
 			horz = false;
 		}
 		
 		if( this._type.includes("left") ) {
 			nr.left = pt.x;
-			nr.width = ((rc.left+rc.width)-pt.x);
+			size = nr.width = ((rc.left+rc.width)-pt.x);
 		}
 		
 		if( this._type=="hsize-next" ) {
-			nr.width = ((rc.left+rc.width)-pt.x);
+			size = nr.width = ((rc.left+rc.width)-pt.x);
 		}
 		
 		if( this._type.includes("right") || this._type=='hsize-prev' ) {
-			nr.width = (pt.x-rc.left);
+			size = nr.width = (pt.x-rc.left);
 		}
 
+		const isFlex = ( c : Component ) => {
+			if( !c ) {
+				return false;
+			}
+
+			if( c.hasClass( "x4flex" ) ) {
+				return true;
+			}
+
+			return c.getStyleValue( "flexGrow" )!==undefined;
+		}
+
+		if( this._type.includes("-prev") ) {
+			if(  isFlex(this.prevElement() ) ) {
+				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
+			}
+			else {
+				this._ref.setStyle( nr );
+			}
+		}
+		else if( this._type.includes("-next") ) {
+			if(  isFlex(this.nextElement() ) ) {
+				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
+			}
+			else {
+				this._ref.setStyle( nr );
+			}
+
+			return;
+		}
+		else {
 		this._ref.setStyle( nr );
-		//this._ref.setStyleValue( "flexGrow", 0 );
+		}
 
 		const nrc = this._ref.getBoundingRect( );
-		this.fire( "resize", { size: horz ? nrc.width : nrc.height, width: nrc.width, height: nrc.height })
+		this.fire( "resize", { size, width: nrc.width, height: nrc.height })
 
 		e.preventDefault( );
 		e.stopPropagation( );