x4js 2.1.0-manual.2 → 2.2.0

package/src/components/messages/messages.ts

@@ -2,21 +2,23 @@
 // :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 import { _tr } from '../../core/core_i18n';
-import { asap, class_ns, UnsafeHtml } from '../../core/core_tools';
+import { asap, class_ns, unsafeHtml, UnsafeHtml } from '../../core/core_tools';
 
 import { HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
-import { Label } from '../label/label';
+import { Label, SimpleText } from '../label/label';
 import { Dialog, DialogProps } from "../dialog/dialog"
 import { Form } from '../form/form';
 import { BtnGroupItem } from '../btngroup/btngroup';
 import { Input } from '../input/input';
+import { Component } from '../../core/component';
+import { Progress } from '../components.js';
 
 import "./messages.module.scss";
 
 import error_icon from "./circle-exclamation.svg";
 import pen_icon from "./pen-field.svg";
-import { Component } from '../../core/component';
+import spinner from "./spinner.svg"
 
 export interface MessageBoxProps extends DialogProps {
 	message: string;
@@ -235,3 +237,67 @@ export class PromptBox extends Dialog<DialogProps>
 	}
 }
 
+@class_ns( "x4" )
+export class ProgressionBox  extends Dialog {
+
+	#has_errors = false;
+
+	constructor( title: string ) {
+		super( { 
+			modal: true,
+			title: null,
+			sizable: true,
+			movable: true,
+			form: new Form( {
+				content: [
+					new HBox( {
+						content: [
+							new Icon( { iconId: spinner }),
+							new VBox( { flex: 1, cls: "right", content: [
+								new SimpleText( { id: "title", text: title } ),
+								new Progress( { id:"prog", min: 0, max: 100, value: 0 } ),
+								new VBox( { id: "sub-text" } ),
+							]})
+						]
+					}),
+				]
+			}),
+			buttons: [ "ok.outline.default" ]
+		});
+
+		this.query("#btnbar").show( false );
+
+		this.on("btnclick", ( ) => this.show( false ) );
+	}
+
+	addText( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").appendContent( new SimpleText( { text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+	}
+
+	addError( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").appendContent( new SimpleText( { cls:"error", text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+
+		this.#has_errors = true;
+	}
+
+	setText( text: string | UnsafeHtml, perc: number ) {
+		this.query<Label>( "#sub-text").setContent( new SimpleText( { text } ) );
+		this.query<Progress>( "#prog").setValue( perc );
+	}
+
+	clear( ) {
+		this.#has_errors = true;
+		this.query<Label>( "#sub-text").clearContent( );
+	}
+
+	done( ) {
+		if( this.#has_errors ) {
+			this.query("#btnbar").show( true );
+		}
+		else {
+			this.setTimeout( "close", 5000, ( ) => { this.show(false);} );
+		}
+	}
+}

package/src/components/messages/spinner.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96C288 113.7 302.3 128 320 128C337.7 128 352 113.7 352 96zM352 544C352 526.3 337.7 512 320 512C302.3 512 288 526.3 288 544C288 561.7 302.3 576 320 576C337.7 576 352 561.7 352 544zM512 320C512 337.7 526.3 352 544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288C526.3 288 512 302.3 512 320zM96 352C113.7 352 128 337.7 128 320C128 302.3 113.7 288 96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352zM139 501C146.9 509.8 159 513.4 170.5 510.6C181.9 507.7 190.9 498.7 193.8 487.3C196.6 475.8 193 463.7 184.2 455.8C176.3 447 164.2 443.4 152.7 446.2C141.3 449.1 132.3 458.1 129.4 469.5C126.6 481 130.2 493.1 139 501zM455.8 501C463.7 509.8 475.8 513.4 487.3 510.6C498.7 507.7 507.7 498.7 510.6 487.3C513.4 475.8 509.8 463.7 501 455.8C493.1 447 481 443.4 469.5 446.2C458.1 449.1 449.1 458.1 446.2 469.5C443.4 481 447 493.1 455.8 501zM139 139C130.2 146.9 126.6 159 129.4 170.5C132.3 181.9 141.3 190.9 152.7 193.8C164.2 196.6 176.3 193 184.2 184.2C193 176.3 196.6 164.2 193.8 152.7C190.9 141.3 181.9 132.3 170.5 129.4C159 126.6 146.9 130.2 139 139z"/></svg>

package/src/components/notification/notification.module.scss

@@ -26,7 +26,7 @@
 }
 
 .x4notification {
-	@extend .shadow-xl;
+	@extend %shadow-xl;
 
 	padding: 8px;
 	border: 1px solid var(--notification-border);

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

@@ -40,7 +40,12 @@
 	}
 
 	& > .body {
-		@extend .rel-fit;
+		position: relative;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		
 		overflow: hidden;
 		justify-content: start;
 		padding: 8px;

package/src/components/shared.scss

@@ -14,25 +14,25 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-.box {
+%box {
 	position: relative;
 }
 
-.hbox {
-	@extend .box;
+%hbox {
+	@extend %box;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 }
 
-.vbox {
-	@extend .box;
+%vbox {
+	@extend %box;
 	display: flex;
 	flex-direction: column;
 }
 
 
-.fit {
+%fit {
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -40,16 +40,7 @@
 	bottom: 0;
 }
 
-
-.rel-fit {
-	position: relative;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.flex {
+%flex {
 	flex-grow: 1;
 	flex-shrink: 0;
 	flex-basis: 0;
@@ -59,83 +50,22 @@
 
 // from tailwind
 
-.shadow-sm {
+%shadow-sm {
 	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-.shadow-md {
+%shadow-md {
 	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
-.shadow-lg {
+%shadow-lg {
 	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
-.shadow-xl {
+%shadow-xl {
 	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
-.shadow-xxl {
+%shadow-xxl {
 	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
 }
-
-
-@keyframes rotating {
-	from {
-	  transform: rotate(0deg);
-	}
-	to {
-	  transform: rotate(360deg);
-	}
-}
-
-@keyframes shaking {
-    0% {
-        transform: rotate(-15deg)
-    }
-
-    4% {
-        transform: rotate(15deg)
-    }
-
-    8%,24% {
-        transform: rotate(-18deg)
-    }
-
-    12%,28% {
-        transform: rotate(18deg)
-    }
-
-    16% {
-        transform: rotate(-22deg)
-    }
-
-    20% {
-        transform: rotate(22deg)
-    }
-
-    32% {
-        transform: rotate(-12deg)
-    }
-
-    36% {
-        transform: rotate(12deg)
-    }
-
-    40% {
-        transform: rotate(0deg)
-    }
-}
-
-
-.x4rotate {
-	animation: rotating 2s linear infinite;
-}
-
-.x4shake {
-	animation-name: shaking;
-    animation-duration: 5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-direction: reverse;
-}

package/src/components/sizers/sizer.module.scss

@@ -26,6 +26,22 @@
 		cursor: ns-resize;
 	}
 
+	&.vsize,
+	&.hsize {
+		position: relative;
+		align-self: stretch;
+		min-width: 4px;
+		min-height: 4px;
+
+		&:hover {
+			background-color: var( --border );
+		}
+	}
+
+	.hsize {
+		cursor: ew-resize;		
+	}
+
 	&.top {
 		@include horz;
 		top: 0;
@@ -87,4 +103,10 @@
 		bottom: 0;
 		cursor: nw-resize;
 	}
-}
+}
+
+.x4hbox {
+	&>.x4csizer {
+		cursor: ew-resize;		
+	}
+}

package/src/components/sizers/sizer.ts

@@ -33,7 +33,7 @@ interface CSizerEvent extends ComponentEvents {
 	stop: ComponentEvent;
 }
 
-type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" ;
+type SizerType = "left" | "top" | "right" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "hsize" | "vsize";
 
 /**
  * 
@@ -52,22 +52,28 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 		this._type = type;
 		this.addClass( type );
-
+		
 		this.addDOMEvent( "pointerdown", ( e: PointerEvent ) => {
 			this.setCapture( e.pointerId );
-			this._ref = target ?? componentFromDOM( this.dom.parentElement );
+
+			let targ = target;
+			if( !targ && (type=='hsize' || type=='vsize') ) {
+				targ = this.nextElement( );
+			}
+
+			this._ref = targ ?? componentFromDOM( this.dom.parentElement );
 
 			this._delta = {x:0,y:0};
 			const rc = this._ref.getBoundingRect();
 
-			if( this._type.includes("left") ) {
+			if( this._type=="hsize" || this._type.includes("left") ) {
 				this._delta.x = e.pageX-rc.left;
 			}
 			else {
 				this._delta.x = e.pageX-(rc.left+rc.width);
 			}
 
-			if( this._type.includes("top") ) {
+			if( this._type=="vsize" || this._type.includes("top") ) {
 				this._delta.y = e.pageY-rc.top;
 			}
 			else {
@@ -104,21 +110,25 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 			nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
-
-		if( this._type.includes("bottom") ) {
+		else if( this._type=="vsize" ) {
+			nr.height = (rc.top+rc.height)-pt.y;
+			horz = false;
+		}
+		else if( this._type.includes("bottom") ) {
 			//nr.top = rc.top;
 			nr.height = (pt.y-rc.top);
 			horz = false;
 		}
-
-		if( this._type.includes("left") ) {
+		else if( this._type.includes("left") ) {
 			nr.left = pt.x;
 			nr.width = ((rc.left+rc.width)-pt.x);
 		}
-
-		if( this._type.includes("right") ) {
+		else if( this._type=="hsize" ) {
+			nr.width = ((rc.left+rc.width)-pt.x);
+		}
+		else if( this._type.includes("right") ) {
 			nr.width = (pt.x-rc.left);
-			}
+		}
 
 		this._ref.setStyle( nr );
 		//this._ref.setStyleValue( "flexGrow", 0 );
@@ -129,4 +139,18 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 		e.preventDefault( );
 		e.stopPropagation( );
 	}
+}
+
+@class_ns( "x4" )
+export class HSizer extends CSizer {
+	constructor( ) {
+		super( "hsize" );
+	}
+}
+
+@class_ns( "x4" )
+export class VSizer extends CSizer {
+	constructor( ) {
+		super( "vsize" );
+	}
 }

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

@@ -6,7 +6,14 @@
 }
 
 .x4tabs {
+	display: grid;
+    grid-template-rows: auto 1fr;
+
+
 	.x4ctablist {
+		display: flex;
+		flex-direction: row;
+
 		gap: 4px;
 		padding: 5px 5px 0 5px;
 		
@@ -34,9 +41,23 @@
 				//color: var( --color-60 );
 			//}
 		}
+	}
 
+	&.vertical {
+		display: grid;
+		grid-template-rows: unset;
+    	grid-template-columns: auto 1fr;
+
+		.x4ctablist {
+			align-items: start;
+			flex-direction: column;
+			border-top: 1px solid var(--border);
+			border-bottom: 1px solid var(--border);
+			border-left: 1px solid var(--border);
+		}
 	}
 
+
 	&> .body {
 		padding: 8px;
 		border: 1px solid var( --border );

package/src/components/tabs/tabs.ts

@@ -17,7 +17,7 @@ import { Component, ComponentEvents, ComponentProps, EvClick } from '../../core/
 import { CoreEvent } from '../../core/core_events';
 
 import { Button, ButtonProps } from '../button/button';
-import { HBox, VBox, StackBox } from '../boxes/boxes';
+import { HBox, VBox, StackBox, Box } from '../boxes/boxes';
 
 import "./tabs.module.scss"
 import { class_ns } from '../../core/core_tools';
@@ -26,12 +26,13 @@ import { class_ns } from '../../core/core_tools';
  * 
  */
 
+type callback = ( ) => Component;
 
 export interface TabItem {
 	name: string;
 	title: string;
 	icon?: string;
-	content: Component;
+	content: Component | callback;
 	cls?: string;	// button class
 }
 
@@ -64,6 +65,7 @@ interface TablistClickEvent extends CoreEvent {
 }
 
 interface TablistProps extends ComponentProps {
+	vertical?: boolean;
 	click: ( ev: TablistClickEvent ) => void;
 }
 
@@ -133,7 +135,8 @@ class CTabList extends HBox<TablistProps,TablistEvents> {
 
 interface TabsProps extends Omit<ComponentProps,"content"> {
 	default: string;
-	items: TabItem[]
+	items: TabItem[];
+	vertical?: boolean;
 }
 
 /**
@@ -141,7 +144,7 @@ interface TabsProps extends Omit<ComponentProps,"content"> {
  */
 
 @class_ns( "x4" )
-export class Tabs extends VBox<TabsProps> {
+export class Tabs extends Box<TabsProps> {
 
 	private _list: CTabList;
 	private _stack: StackBox;
@@ -150,6 +153,8 @@ export class Tabs extends VBox<TabsProps> {
 	constructor( props: TabsProps ) {
 		super( props );
 
+		this.setClass( "vertical", props.vertical );
+		
 		const pages = props.items?.map( x => {
 			return {
 				name: x.name,
@@ -160,7 +165,7 @@ export class Tabs extends VBox<TabsProps> {
 		this.setContent( [
 			this._list = new CTabList( { 
 				click: ( ev ) => this._onclick( ev ) }, 
-				props.items 
+				props.items
 			),
 			this._stack = new StackBox( { 
 				cls: "body x4flex", 

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

@@ -39,7 +39,7 @@
 	}
 
 	textarea {
-		@extend .flex;
+		@extend %flex;
 
 		padding: 4px;
 		outline: none;

package/src/components/textedit/textedit.module.scss

@@ -29,7 +29,7 @@
 }
 
 .x4textedit {
-	@extend .hbox;
+	@extend %hbox;
 	margin: 5px;
 	gap: 6px;
 
@@ -38,7 +38,7 @@
 		justify-content: end;
 
 		&> .x4label {
-			@extend .hbox;
+			@extend %hbox;
 			height: 100%;
 			padding: 0;
 			font-weight: 500;
@@ -51,12 +51,12 @@
 	}
 
 	&> #edit {
-		@extend .hbox;
-		@extend .flex;
+		@extend %hbox;
+		@extend %flex;
 		border-bottom: 1px solid var( --textedit-border );
 		
 		.x4input {
-			@extend .flex;
+			@extend %flex;
 			outline: none;
 			margin: 0;
 		}

package/src/components/tooltips/tooltips.scss

@@ -29,7 +29,7 @@
 }
 
 .x4tooltip {
-	@extend .shadow-xl;
+	@extend %shadow-xl;
 	
 	display: flex;
 	flex-direction: row;

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

@@ -34,7 +34,7 @@
 }
 
 .x4treeview {
-	@extend .vbox;
+	@extend %vbox;
 
 	overflow-y: auto;
 	height: 100%;

package/src/components/viewport/viewport.module.scss

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 .x4scrollview {
-	@extend .flex;
+	@extend %flex;
 
 	position: absolute;
 	height: 100%;

package/src/core/core_application.ts

@@ -304,7 +304,7 @@ export class Application<E extends ApplicationEvents = ApplicationEvents> extend
 			msg_socket = null;
 
 			if( opened ) {
-				looseCallback( );
+				looseCallback?.( );
 				opened = 0;
 			}
 		}

package/src/core/core_data.ts

@@ -25,6 +25,7 @@ export type DataFieldValue = string | Date | number | boolean;
 
 export type ChangeCallback = (type: string, id?: DataRecordID) => void;
 export type CalcCallback = () => string;
+export type SortCallback = ( v1: any, v2: any ) => number;
 
 export type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' | 'object' | 'any' | 'calc';
 export type DataIndex = Uint32Array;
@@ -935,7 +936,8 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		
 		interface sort_info {
 			fidx: number,
-			asc: boolean
+			asc: boolean,
+			cb: SortCallback,
 		}
 
 		let bads = 0;		// unknown fields
@@ -943,7 +945,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 
 		// if no fields are given, reset sort by id
 		if ( sort===null ) {
-			fidxs.push( { fidx: 0, asc: true } );
+			fidxs.push( { fidx: 0, asc: true, cb: null } );
 		}
 		else {
 			fidxs = sort.map( (si) => {
@@ -954,7 +956,7 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 					bads++;
 				}
 
-				return { fidx: fi, asc: si.ascending };
+				return { fidx: fi, asc: si.ascending, cb: si.callback };
 			});
 		}
 
@@ -969,11 +971,17 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		if( fidxs.length==1 ) {
 
 			const field = fidxs[0].fidx;
+			const cb 	= fidxs[0].cb;
 
 			index.sort( ( ia, ib ) => {
 
 				let va = m.getRaw( field, this.getByIndex(ia) ) ?? '';
 				let vb = m.getRaw( field, this.getByIndex(ib) ) ?? '';
+
+				if( cb ) {
+					return cb( va, vb );
+				}
+
 				if (va > vb) { return 1; }
 				if (va < vb) { return -1; }
 				return 0;
@@ -987,13 +995,17 @@ export class DataStore<T = any> extends EventSource<DataStoreEventMap> {
 		else {
 			index.sort( ( ia, ib ) => {
 
-				for( let fi=0; fi<fidxs.length; fi++ ) {
-
-					let fidx = fidxs[fi].fidx;
-					let mul = fidxs[fi].asc ? 1 : -1;
+				for( const fi of fidxs ) {
+					let fidx 	= fi.fidx;
+					let mul 	= fi.asc ? 1 : -1;
 
 					let va = m.getRaw( fidx, this.getByIndex(ia) ) ?? '';
 					let vb = m.getRaw( fidx, this.getByIndex(ib) ) ?? '';
+
+					if( fi.cb ) {
+						return fi.cb( va, vb );
+					}
+
 					if (va > vb) { return mul; }
 					if (va < vb) { return -mul; }
 				}
@@ -1096,6 +1108,7 @@ export interface SortProp {
 	field: string; 			// 
 	ascending: boolean;		// 
 	numeric?: boolean;		// numeric sort
+	callback?: SortCallback;
 }
 
 

package/src/x4.d.ts

@@ -0,0 +1,10 @@
+/**
+* @file x4.d.ts
+* @author Etienne Cochard 
+* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
+**/
+
+declare module "*.svg" {
+  	const content: string;
+  	export default content;
+}

package/src/x4.scss

@@ -14,6 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-@use "./components/normalize.scss";
-@use "./components/themes.scss";
-@use "./components/base.scss"
+@import "./components/normalize.scss";
+@import "./components/themes.scss";
+@import "./components/base.scss";