x4js 2.0.32 → 2.0.33

package/package.json

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

package/src/components/base.scss

@@ -24,6 +24,10 @@
 	@extend %flex;
 }
 
+.fit {
+	@extend %fit;
+}
+
 @keyframes rotating {
 	from {
 	  transform: rotate(0deg);

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

@@ -22,7 +22,8 @@
 }
 
 .x4dialog {
-	@extend %shadow-xl, .vbox;
+	@extend %shadow-xl;
+	@extend %vbox;
 
 	position: absolute !important;
 	background-color: white;

package/src/components/gridview/folder-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M32 96l0 200.6 21.7-54.3C65.9 211.9 95.3 192 128 192l320 0 0-32c0-17.7-14.3-32-32-32l-117.5 0c-25.5 0-49.9-10.1-67.9-28.1L204.1 73.4c-6-6-14.1-9.4-22.6-9.4L64 64C46.3 64 32 78.3 32 96zM49.1 426.1c-2 4.9-1.4 10.5 1.6 14.9s7.9 7 13.2 7l320 0 80 0c6.5 0 12.4-4 14.9-10.1l64-160c2-4.9 1.4-10.5-1.6-14.9s-7.9-7-13.2-7l-400 0c-6.5 0-12.4 4-14.9 10.1l-64 160z"/><path d="M448 160l0 32 32 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0 80 0c19.6 0 37.3-11.9 44.6-30.2l64-160c5.9-14.8 4.1-31.5-4.8-44.7S543.9 224 528 224l-400 0c-19.6 0-37.3 11.9-44.6 30.2L32 382.8 32 96c0-17.7 14.3-32 32-32l117.5 0c8.5 0 16.6 3.4 22.6 9.4l22.6-22.6L204.1 73.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1L416 128c17.7 0 32 14.3 32 32zM384 448L64 448c-5.3 0-10.3-2.6-13.2-7s-3.6-10-1.6-14.9l64-160c2.4-6.1 8.3-10.1 14.9-10.1l400 0c5.3 0 10.3 2.6 13.2 7s3.6 10 1.6 14.9l-64 160C476.4 444 470.5 448 464 448l-80 0z"/></svg>

package/src/components/gridview/gridview.module.scss

@@ -109,7 +109,21 @@
 		bottom: var( --scrollbar-size );
 		left: 0;
 		top: 0;
+
+		.empty {
+			position: relative;
+			left: 50%;
+			top: 20%;
+			width: fit-content;
+
+			#icon {
+				height: 64px;
+				fill: var( --accent-background );
+				opacity: 50%;
+			}
+		}
 	}
+
 	.row {
 		position: absolute;
 		left: 0;

package/src/components/gridview/gridview.ts

@@ -15,7 +15,7 @@
  **/
 
 
-import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
+import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
 import { class_ns, isNumber, isString, setWaitCursor, UnsafeHtml } from '../../core/core_tools';
 import { DataModel, DataStore, DataView, DataRecord, EvViewChange } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
@@ -26,9 +26,13 @@ import { Image } from '../image/image'
 import { Box } from '../boxes/boxes';
 import { CSizer } from '../sizers/sizer'
 import { Viewport } from '../viewport/viewport';
-import { SimpleText } from '../label/label';
+import { Label, SimpleText } from '../label/label';
+
+import { _tr } from '../../core/core_i18n';
 
 import check_icon from "../checkbox/check.svg";
+import empty_icon from "./folder-open.svg";
+
 import "./gridview.module.scss"
 
 export type CellRenderer = (rec: DataRecord) => Component;
@@ -75,11 +79,16 @@ export interface GridviewProps extends ComponentProps {
 	footer?: boolean;
 	store: DataStore;
 	columns: GridColumn[];
+	emptyMsg?: string;
 
 	click?: EventCallback<EvClick>;
 	dblClick?: EventCallback<EvDblClick>;
 	contextMenu?: EventCallback<EvContextMenu>;
 	selectionChange?: EventCallback<EvSelectionChange>;
+	sort?: {
+		id: string;
+		asc?: boolean;
+	}
 }
 
 /**
@@ -121,6 +130,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	private _end: number;
 
 	private _selection: Set<number>;
+	
 
 	// TODO: that
 	private _num_fmt 	= new Intl.NumberFormat('fr-FR');
@@ -172,8 +182,11 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 		if (props.store) {
 			this.setStore(props.store);
-		}
 
+			if( props.sort ) {
+				this.sortCol( props.sort.id, props.sort.asc===true );
+			}
+		}
 	}
 
 	/**
@@ -240,7 +253,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 		if( sens==kbNav.first || sens==kbNav.last ) {
 			let nel = sens==kbNav.first ? 0 : this._dataview.getCount()-1;
-			this._clearSelection();
+			this._clearSelection( false );
 			this._addSelection( nel );
 			this._scrollToIndex( nel );
 			return true;
@@ -249,7 +262,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			const fsel = this._selection.values().next().value;
 			let nel = sens==kbNav.next ? fsel+1 : fsel-1;
 			if( nel>=0 && nel<this._dataview.getCount() ) {
-				this._clearSelection();
+				this._clearSelection( false );
 				this._addSelection( nel );
 				this._scrollToIndex( nel );
 				return true;
@@ -271,7 +284,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			}
 
 			if( nel!=fsel ) {
-				this._clearSelection();
+				this._clearSelection( false );
 				this._addSelection( nel );
 
 				if (this._dataview.getCount() < SCROLL_LIMIT) {
@@ -785,6 +798,13 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			rowel.addClass("selected");
 		}
 
+		if( rowid&1 ) {
+			rowel.addClass( "even" );
+		}
+		else {
+			rowel.addClass( "odd" );
+		}
+
 		return rowel;
 	}
 
@@ -922,7 +942,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		}
 
 		this.setStyleVariable("--fixed-width", maxfw + "px");
-		this._body.setStyleValue("height", maxh + "px");
+		this._body.setStyleValue("height", maxh==0 ? "100%" : maxh + "px");
 		this._body.setStyleValue("width", maxw + "px");
 		this._vheader.setStyleValue("height", maxh + "px");
 	}
@@ -998,10 +1018,13 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			if (row!==undefined ) {
 				//TODO: multiselection
 				if( !this._selection.has(row) ) {
-					this._clearSelection();
+					this._clearSelection( false );
 					this._addSelection(row);
 				}
 			}
+			else {
+				this._clearSelection( true );
+			}
 		});
 
 		// DBLCLICK
@@ -1010,7 +1033,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			if (row!==undefined ) {
 				//TODO: multiselection
 				if( !this._selection.has(row) ) {
-					this._clearSelection();
+					this._clearSelection( false );
 					this._addSelection(row);
 				}
 
@@ -1027,7 +1050,7 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			if (row!==undefined ) {
 				//TODO: multiselection
 				if( !this._selection.has(row) ) {
-					this._clearSelection();
+					this._clearSelection( false );
 					this._addSelection(row);
 				}
 
@@ -1114,6 +1137,14 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 
 			// rows
 			const rowc = this._dataview ? this._dataview.getCount() : 0;
+
+			// empty ?
+			if( rowc==0 ) {
+				this._body.setContent( new Label( { cls: "empty vertical", icon: empty_icon, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
+				return;
+			}
+
+
 			const mul = rowc < SCROLL_LIMIT ? this._row_height : 1;
 
 			const start = Math.floor(this._top / mul);
@@ -1190,10 +1221,14 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 */
 
 	clearSelection( ) {
-		this._clearSelection( );
+		this._clearSelection( false );
 	}
 
-	private _clearSelection() {
+	private _clearSelection( notify: boolean ) {
+		if( !this._selection.size ) {
+			return;
+		}
+
 		for (const ref of this._selection.keys()) {
 			const els = this.queryAll(`.row[data-row="${ref}"]`)
 			els.forEach(el => {
@@ -1202,6 +1237,9 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		}
 
 		this._selection.clear();
+		if( notify ) {
+			this.fire("selectionChange", { selection: [], empty: true } );
+		}
 	}
 
 	/**
@@ -1274,3 +1312,4 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	}
 }
 
+

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

@@ -77,6 +77,7 @@
 }
 
 .x4simpletext {
+	color: var(--label-color);
 	text-align: left;
 	&.al-center { text-align: center; }
 	&.al-right { text-align: right; }

package/src/components/messages/messages.module.scss

@@ -90,3 +90,40 @@
 
 }
 
+
+.x4progressionbox {
+	width: 640px;
+	height: 200px;
+	&> .x4form {
+		min-height: unset;
+	}
+
+	& > .caption,
+	& > #btnbar {
+		display: none;
+	}
+
+	& .x4form {
+		min-width: 400px;
+		.x4icon {
+			    height: 64px;
+				animation: rotating 3s linear infinite;
+				fill: var(--accent-background);
+		}
+
+		.x4label,
+		.x4simpletext {
+			padding: 16px 16px 0 16px;
+			line-height: 1.8em;
+		}
+
+		.x4progress {
+			margin-left: 16px;
+		}
+
+		#sub-text {
+			max-height: 140px;
+			overflow-y: auto;
+		}
+	}
+}

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,44 @@ export class PromptBox extends Dialog<DialogProps>
 	}
 }
 
+@class_ns( "x4" )
+export class ProgressionBox  extends Dialog {
+
+	#log: (string | UnsafeHtml)[];
+
+	constructor( title: string ) {
+		super( { 
+			modal: true,
+			title: null,
+			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 SimpleText( { id: "sub-text", text: "" } ),
+							]})
+						]
+					}),
+				]
+			}),
+			buttons: [ "ok.outline.default","cancel.outline" ]
+		});
+
+		this.#log = [];
+	}
+
+	setText( text: string | UnsafeHtml, perc: number ) {
+		this.#log.push( text );
+		this.query<Label>( "#sub-text").setText( unsafeHtml(this.#log.join("<br/>")) );
+		this.query<Progress>( "#prog").setValue( perc );
+	}
+
+	clearText( ) {
+		this.#log = [];
+		this.query<Label>( "#sub-text").setText( '' );
+	}
+}

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/sizers/sizer.module.scss

@@ -26,6 +26,17 @@
 		cursor: ns-resize;
 	}
 
+	&.inplace {
+		position: relative;
+		align-self: stretch;
+		min-width: 4px;
+		min-height: 4px;
+
+		&:hover {
+			background-color: var( --border );
+		}
+	}
+
 	&.top {
 		@include horz;
 		top: 0;
@@ -87,4 +98,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" | "inplace";
 
 /**
  * 
@@ -52,15 +52,21 @@ 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=='inplace' ) {
+				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=="inplace" || this._type.includes("left") ) {
 				this._delta.x = e.pageX-rc.left;
 			}
 			else {
@@ -104,21 +110,18 @@ 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.includes("bottom") ) {
 			//nr.top = rc.top;
 			nr.height = (pt.y-rc.top);
 			horz = false;
 		}
-
-		if( this._type.includes("left") ) {
+		else if( this._type=="inplace" || 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.includes("right") ) {
 			nr.width = (pt.x-rc.left);
-			}
+		}
 
 		this._ref.setStyle( nr );
 		//this._ref.setStyleValue( "flexGrow", 0 );

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/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;
 			}
 		}