x4js 2.0.14 → 2.0.17

package/package.json

@@ -1,13 +1,8 @@
 {
 	"name": "x4js",
-	"version": "2.0.14",
+	"version": "2.0.17",
 	"description": "X4 framework",
 	"author": "etienne cochard",
-	"main": "src/x4.ts",
-	"typess": "lib/types/x4js.d.ts",
-	"filess": [
-		"lib/**/*"
-	],
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -25,37 +20,32 @@
 		"application"
 	],
 	"scripts": {
-		"build": "node scripts/build.mjs --watch --hmr --serve",
-		"build-release": "node scripts/build.mjs --release",
+		"build": "x4build --watch --hmr --serve",
+		"build-release": "x4build --release",
 		"prepack": "node scripts/prepack.mjs"
 	},
 	"homepage": "https://x4js.org",
-	"module": "lib/esm/x4.mjs",
-	"exportss": {
+	"files": ["lib","src"],
+	"types": "./src/x4.ts",
+	"module": "./lib/esm/x4.mjs",
+	"main": "./lib/cjs/x4.js",
+	"exports": {
 		".": {
-			"import": {
-				"types": "./lib/types/x4.d.ts",
-				"default": "./lib/esm/x4.mjs"
-			},
-			"require": {
-				"types": "./lib/types/x4.d.ts",
-				"default": "./lib/cjs/x4.js"
-			}
+			"types": "./src/x4.ts",
+			"module": "./lib/esm/x4.mjs",
+			"require": "./lib/cjs/x4.js"
 		}
 	},
-	"devDependencies": {
-		"chalk": "^5.3",
-		"esbuild": "^0.24",
-		"esbuild-plugin-d.ts": "^1.3",
-		"esbuild-sass-plugin": "^3.3",
-		"typescript": "^5.6.3",
-		"watcher": "^2.3",
-		"ws": "^8.18"
-	},
 	"x4build": {
 		"entryPoints": [
 			"src/x4.ts"
 		],
-		"outdir": "build"
+		"outdir": "lib"
+	},
+	"devDependencies": {
+		"typescript": "^5.8.3",
+		"x4build": "^1.6.8",
+		"esbuild-plugin-d.ts": "^1.3",
+		"esbuild-sass-plugin": "^3.3"
 	}
 }

package/src/components/boxes/boxes.ts

@@ -14,10 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns, isArray, isNumber, isString } from '@core/core_tools.js';
-import { Component, ComponentContent, ComponentEvents, ComponentProps } from "../../core/component"
+import { asap, class_ns, isArray, isNumber, isString } from '@core/core_tools.js';
+import { Component, ComponentContent, ComponentEvents, ComponentProps, EvSelectionChange } from "../../core/component"
 
 import "./boxes.module.scss";
+import { EventCallback } from '@core/core_events.js';
 
 export interface BoxProps extends ComponentProps {
 	tag?: string;
@@ -61,24 +62,46 @@ type ContentBuilder = ( ) => Component;
 interface StackItem {
 	name: string;
 	content: Component | ContentBuilder;
+	title?: string;
 }
 
-interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
+/**
+ * 
+ */
+
+interface StackeBoxEvents extends ComponentEvents {
+	pageChange?: EvSelectionChange;
+}
+
+export interface StackBoxProps extends Omit<ComponentProps,"content"> {
 	default: string;
 	items: StackItem[];
+	pageChange?: EventCallback<EvSelectionChange>;
 }
 
+/**
+ * 
+ */
+
 interface StackItemEx extends StackItem {
 	page: Component;
 }
 
+/**
+ * 
+ */
+
 @class_ns( "x4" )
-export class StackBox extends Box<StackedLayoutProps> {
-	private _items: StackItemEx[];
+export class StackBox<P extends StackBoxProps = StackBoxProps, E extends StackeBoxEvents = StackeBoxEvents>  extends Box<StackBoxProps,StackeBoxEvents> {
+	
+	protected _items: StackItemEx[];
+	protected _cur: number;
 
-	constructor( props: StackedLayoutProps ) {
+	constructor( props: StackBoxProps ) {
 		super( props );
 
+		this.mapPropEvents( props, "pageChange" );
+
 		this._items = props.items?.map( itm => {
 			return { ...itm, page: null as any};
 		});
@@ -105,7 +128,9 @@ export class StackBox extends Box<StackedLayoutProps> {
 			sel.setClass( "selected", false );
 		}
 
-		const pg = this._items.find( x => x.name==name );
+		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 );
@@ -117,6 +142,8 @@ export class StackBox extends Box<StackedLayoutProps> {
 				(sel as any).activate?.( );
 				sel.setClass( "selected", true );
 			}
+
+			asap( ( ) => this.fire( "pageChange", { selection: pg.name, empty: !sel } ) );
 		}
 
 		return pg?.page;
@@ -149,18 +176,68 @@ export class StackBox extends Box<StackedLayoutProps> {
 		const pg = this._items.find( x => x.name==name );
 		return pg ? pg.content : null;
 	}
+
+	getItem( name: string ) {
+		const pg = this._items.find( x => x.name==name );
+		return pg;
+	}
+
+	/**
+	 * 
+	 */
+
+	getCurPage( ) {
+		const c = this._items[this._cur];
+		return c?.name;
+	}
 }
 
+// :: ASSIST BOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+@class_ns( "x4" )
+export class AssistBox extends StackBox {
+	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 );
+		}
+	}
+
+	isFirstPage( ) {
+		return this._cur==0;
+	}
+
+	isLastPage( ) {
+		return this._cur==this._items.length-1;
+	}
+}
+
+
+
 // :: GRIDBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
+interface GridBoxItem {
+	row: number;	// starts at 0
+	col: number;	// starts at 0
+	item: Component;
+}
 
-export interface GridboxProps extends BoxProps {
+export interface GridBoxProps extends Omit<BoxProps,"content"> {
 	rows?: number | string | string[];
 	columns?: number | string | string[];
+	items?: GridBoxItem[];
 }
 
 @class_ns("x4")
-export class GridBox<P extends GridboxProps=GridboxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
+export class GridBox<P extends GridBoxProps=GridBoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
 
 	constructor( props: P ) {
 		super( props );
@@ -172,6 +249,10 @@ export class GridBox<P extends GridboxProps=GridboxProps,E extends ComponentEven
 		if( props.columns!==undefined ) {
 			this.setCols( props.columns );
 		}
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
 	}
 
 	setRows( r: number | string | string[] ) {
@@ -212,6 +293,17 @@ export class GridBox<P extends GridboxProps=GridboxProps,E extends ComponentEven
 	setTemplate( t: string[] ) {
 		this.setAttribute( "grid-template-area", t.map( x => '"' + x + '"' ).join(" ") );
 	}
+
+	setItems( items: GridBoxItem[] ) {
+		items.forEach( x => {
+			x.item.setStyle( {
+				gridColumn: (x.col+1)+"",
+				gridRow: (x.row+1)+"",
+			} );
+		});
+
+		this.setContent( items.map( x => x.item ) );
+	}
 }
 
 

package/src/components/canvas/canvas.ts

@@ -29,7 +29,7 @@ interface CanvasEventMap extends ComponentEvents {
 	paint: EvPaint;
 }
 
-interface CanvasProps extends ComponentProps {
+export interface CanvasProps extends ComponentProps {
 	paint: EventCallback<EvPaint>
 	clear?: boolean;
 }

package/src/components/canvas/canvas_ex.ts

@@ -14,6 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+import { Point } from "../../core/core_tools"
 
 export interface CanvasEx extends CanvasRenderingContext2D {
 	width: number;
@@ -46,12 +47,17 @@ export function createPainter(c2d: CanvasRenderingContext2D, w: number, h: numbe
 	return cp;
 }
 
+/**
+ * 
+ */
+
 function smoothLine( this: CanvasRenderingContext2D, points: any[], path: CanvasPath = null, move = true) {
 	if (points.length < 2) {
 		return;
 	}
 
 	if (!path) {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		path = this;
 	}
 
@@ -67,14 +73,14 @@ function smoothLine( this: CanvasRenderingContext2D, points: any[], path: Canvas
 		return;
 	}
 
-	function midPointBtw(p1: IPoint, p2: IPoint ) {
+	function midPointBtw(p1: Point, p2: Point ) {
 		return {
 			x: p1.x + (p2.x - p1.x) / 2,
 			y: p1.y + (p2.y - p1.y) / 2
 		};
 	}
 
-	function getQuadraticXY(t: number, sx: number, sy: number, cp1x: number, cp1y: number, ex: number, ey: number) : IPoint {
+	function getQuadraticXY(t: number, sx: number, sy: number, cp1x: number, cp1y: number, ex: number, ey: number) : Point {
 		return {
 			x: (1 - t) * (1 - t) * sx + 2 * (1 - t) * t * cp1x + t * t * ex,
 			y: (1 - t) * (1 - t) * sy + 2 * (1 - t) * t * cp1y + t * t * ey
@@ -146,7 +152,7 @@ function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: n
 
 	for (; i < numOfSeg; i++) {
 
-		var st = i / numOfSeg,
+		const st = i / numOfSeg,
 			st2 = st * st,
 			st3 = st2 * st,
 			st23 = st3 * 2,
@@ -173,9 +179,9 @@ function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: n
 
 	function parse(pts: number[], cache: Float32Array, l: number) {
 
-		for (var i = 2, t; i < l; i += 2) {
+		for (let i = 2, t; i < l; i += 2) {
 
-			var pt1 = pts[i],
+			let pt1 = pts[i],
 				pt2 = pts[i + 1],
 				pt3 = pts[i + 2],
 				pt4 = pts[i + 3],
@@ -187,7 +193,7 @@ function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: n
 
 			for (t = 0; t < numOfSeg; t++) {
 
-				var c = t << 2, //t * 4;
+				let c = t << 2, //t * 4;
 
 					c1 = cache[c],
 					c2 = cache[c + 1],
@@ -206,6 +212,7 @@ function smoothLineEx(this: CanvasRenderingContext2D, _points: any[], tension: n
 	res[rPos] = points[l + 1];
 
 	if (!path) {
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
 		path = this;
 	}
 

package/src/components/components.ts

@@ -3,6 +3,7 @@ export * from "./breadcrumb/breadcrumb"
 export * from "./btngroup/btngroup"
 export * from "./button/button"
 export * from "./calendar/calendar"
+export * from "./canvas/canvas"
 export * from "./checkbox/checkbox"
 export * from "./colorinput/colorinput"
 export * from "./colorpicker/colorpicker"
@@ -28,7 +29,6 @@ export * from "./progress/progress"
 export * from "./propgrid/propgrid"
 export * from "./radio/radio"
 export * from "./rating/rating"
-export * from "./tickline/tickline"
 export * from "./select/select"
 export * from "./sizers/sizer"
 export * from "./slider/slider"
@@ -36,6 +36,7 @@ export * from "./switch/switch"
 export * from "./tabs/tabs"
 export * from "./textarea/textarea"
 export * from "./textedit/textedit"
+export * from "./tickline/tickline"
 export * from "./tooltips/tooltips"
 export * from "./treeview/treeview"
 export * from "./viewport/viewport"

package/src/components/dialog/dialog.module.scss

@@ -27,9 +27,7 @@
 	position: absolute !important;
 	background-color: white;
 	border: 1px solid var( --border-dark );
-	min-width: min-content;
-    min-height: min-content;
-
+	
 	&> .caption {
 		padding: 8px;
 		background-color: var(--color-dialog-caption);
@@ -52,9 +50,10 @@
 		}
 	}
 
-	&> .form {
+	&> .x4form {
 		min-height: 128px;
 		min-width: 450px;
+		flex: 1;
 	}
 
 	&> #btnbar {

package/src/components/dialog/dialog.ts

@@ -58,6 +58,7 @@ interface DialogEvents extends PopupEvents {
 export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents> extends Popup<P, E> {
 
 	private form: Form;
+	private _title: Label;
 
 	constructor(props: P) {
 		super({ tag: "dialog", modal: true, ...props });
@@ -70,7 +71,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 			new HBox({
 				cls: "caption",
 				content: [
-					new Label({
+					this._title = new Label({
 						id: "title",
 						cls: "caption-element",
 						icon: props.icon,
@@ -187,7 +188,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 	 */
 
 	getButton(name: string) {
-		const btns = this.query<BtnGroup>("#btnbar");
+		const btns = this.getBtnBar( );
 		return btns.getButton(name);
 	}
 
@@ -207,6 +208,22 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 		
 		return super.queryInterface( name );
 	}
+
+	/**
+	 * 
+	 */
+
+	setTitle( title: string ) {
+		this._title.setText( title );
+	}
+
+	/**
+	 * 
+	 */
+
+	getBtnBar( ) {
+		return this.query<BtnGroup>("#btnbar");		
+	}
 }
 
 

package/src/components/form/form.ts

@@ -69,7 +69,7 @@ export class Form<P extends FormProps = FormProps> extends Box<P> {
 			
 			if( ifx ) {
 				const nme = x.getAttribute( "name" );
-				if( values.hasOwnProperty( nme) ) {
+				if( Object.prototype.hasOwnProperty.call(values,nme) ) {
 					ifx.setRawValue( values[nme] );
 				}
 			}

package/src/components/icon/icon.module.scss

@@ -22,6 +22,7 @@
 	min-width: 10px;
 	height: 10px;
     overflow: hidden;
+	aspect-ratio: 1 / 1;
     
 	svg {
 		width: 100%;

package/src/components/icon/icon.ts

@@ -48,7 +48,6 @@ class SvgLoader {
 				this.waiters.set( file, [resolve] );
 				this._load( file )
 					.then( ( data: string ) => {
-						console.timeEnd( file );
 						this.cache.set( file, data );
 						const ww = this.waiters.get( file );
 						ww.forEach( cb => cb(data ) );
@@ -58,7 +57,6 @@ class SvgLoader {
 	}
 
 	private async _load( file: string ): Promise<string> {
-		console.time( file );
 		const res = await fetch( file );
 		if( res.ok ) {
 			return res.text( );

package/src/components/input/input.ts

@@ -16,14 +16,17 @@
 
 import { EventCallback } from '@core/core_events.js';
 import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, isString } from '../../core/core_tools.js';
+import { class_ns, formatIntlDate, IComponentInterface, IFormElement, isString } from '../../core/core_tools.js';
 
 import "./input.module.scss"
 
 export interface BaseProps extends ComponentProps {
 	name?: string;
 	autofocus?: boolean;
-
+	required?: boolean;
+	readonly?: boolean;
+	placeholder?: string;
+	
 	focus?: EventCallback<EvFocus>;
 	change?: EventCallback<EvChange>;
 }
@@ -36,54 +39,60 @@ interface CheckboxProps extends BaseProps {
 
 interface RadioProps extends BaseProps {
 	type: "radio";
-	value: boolean | number | string;
+	value?: boolean | number | string;
 	checked?: boolean;
 }
 
 export interface RangeProps extends BaseProps {
 	type: "range";
-	value: number;
+	value?: number;
 	min: number;
 	max: number;
 	step?: number;
 }
 
-interface DateProps extends BaseProps {
+export interface FileProps extends BaseProps {
+	type: "file";
+	accept: string | string[];
+	value?: never;
+}
+
+
+export interface DateProps extends BaseProps {
 	type: "date";
+	value?: Date | string;
+}
+
+export interface TimeProps extends BaseProps {
+	type: "time";
 	readonly?: boolean;
 	required?: boolean;
-	value: Date | string;
+	value?: string;
 }
 
-interface NumberProps extends BaseProps {
+export interface NumberProps extends BaseProps {
 	type: "number";
 	readonly?: boolean;
 	required?: boolean;
-	value: number | string;
+	value?: number | string;
 	min?: number;
 	max?: number;
 	step?: number;
 }
 
-interface FileProps extends BaseProps {
-	type: "file";
-	accept: string | string[];
-}
-
 export interface TextInputProps extends BaseProps {
-	type: "text" | "email" | "password" | "date" | "number";
+	type?: "text" | "email" | "password";
 	readonly?: boolean;
 	required?: boolean;
 	pattern?: string;
 	value?: string | number;
-	placeholder?: string;
 	spellcheck?: boolean;
 	minlength?: number;
 	maxlength?: number;
 }
 
 
-export type InputProps = CheckboxProps | RadioProps | TextInputProps | RangeProps | DateProps | NumberProps | FileProps;
+export type InputProps = TextInputProps | CheckboxProps | RadioProps | RangeProps | DateProps | NumberProps | FileProps | TimeProps;
 
 
 interface InputEvents extends ComponentEvent {
@@ -131,7 +140,7 @@ export class Input extends Component<InputProps,InputEvents> {
 
 			case "number": {
 				const p = this.props as NumberProps;
-				
+			
 				this.setAttribute( "required", p.required );
 				this.setAttribute( "readonly", p.readonly );
 				this.setAttribute( "min", p.min );
@@ -159,9 +168,9 @@ export class Input extends Component<InputProps,InputEvents> {
 
 				let v = props.value;
 				if( v instanceof Date ) {
-					//this.setAttribute( "value", formatDate( v, "Y-M-D" ) );
+					this.setAttribute( "value", formatIntlDate( v, "Y-M-D" ) );
 				}
-				else {
+				else if( props.value!==null && props.value!==undefined ) {
 					this.setAttribute( "value", v );
 				}
 
@@ -181,6 +190,14 @@ export class Input extends Component<InputProps,InputEvents> {
 				break;
 			}
 
+			case "time": {
+				this.setAttribute( "required", props.required );
+				if( props.value!==null && props.value!==undefined ) {
+					this.setAttribute( "value", props.value );
+				}
+				break;
+			}
+
 			default: {
 				this.setAttribute( "required", props.required );
 				this.setAttribute( "readonly", props.readonly );
@@ -267,8 +284,12 @@ export class Input extends Component<InputProps,InputEvents> {
 	 * @returns 
 	 */
 	
-	public getNumValue( ) {
-		return parseFloat( this.getValue() );
+	public getNumValue( defNan?: number ) {
+		const v = parseFloat( this.getValue() );
+		if( isNaN(v) && defNan!==undefined ) {
+			return defNan;
+		}
+		return v;
 	}
 
 	/**
@@ -283,10 +304,13 @@ export class Input extends Component<InputProps,InputEvents> {
 		if( ndec==-2 && this.props.type=='number' ) {
 			const p = this.props as NumberProps;
 
-			if( p.step ) {
+			if( p.step<1 ) {
 				let ndec = -Math.floor(Math.log10(p.step ?? 1) );
 				return this.setValue( value.toFixed(ndec) );
 			}
+			else if( p.step>1 ) {
+				return this.setValue( value.toFixed() );
+			}
 		}
 		else if( ndec>=0 ) {
 			return this.setValue( value.toFixed(ndec) );