x4js 2.0.31 → 2.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "x4js",
-    "version": "2.0.31",
+    "version": "2.0.33",
     "type": "module",
     "main": "src/x4.ts",
     "module": "src/x4.ts",
@@ -12,7 +12,6 @@
     	"build": "x4build --watch --hmr --serve",
     	"build-release": "x4build --release"
 	},
-
   	"repository": {
     	"type": "git",
  		"url": "git+https://github.com/rlibre/x4.git"

package/src/components/base.scss

@@ -17,9 +17,73 @@
 @use "./shared.scss";
 
 .x4box {
-	@extend .box;
+	@extend %box;
 }
 
 .x4flex {
-	@extend .flex;
+	@extend %flex;
 }
+
+.fit {
+	@extend %fit;
+}
+
+@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/boxes/boxes.module.scss

@@ -17,21 +17,21 @@
 @use "../shared.scss";
 
 .x4hbox {
-	@extend .hbox;
+	@extend %hbox;
 	&.align-start {
 		align-items: start;
 	}
 }
 
 .x4vbox {
-	@extend .vbox;
+	@extend %vbox;
 }
 
 .x4stackbox {
 	display: flex;
 	
 	&>* {
-		@extend .fit;
+		@extend %fit;
 		position: relative !important;
 	}
 

package/src/components/button/button.module.scss

@@ -51,7 +51,7 @@
 }
 
 .x4button {
-	@extend .hbox;
+	@extend %hbox;
 	
 	margin: 5px;
 	gap: 4px;

package/src/components/calendar/calendar.module.scss

@@ -81,12 +81,12 @@
 	}
 
 	.week {
-		@extend .flex;
+		@extend %flex;
 		align-items: center;
 		padding: 2px;
 				
 		.cell {
-			@extend .flex;
+			@extend %flex;
 			min-width: 28px;
 			min-height: 28px;
 			
@@ -94,7 +94,7 @@
 			text-align: center;
 			
 			.text {
-				@extend .hbox;
+				@extend %hbox;
 
 				transition: background-color 0.3s, color 0.3s;
 				justify-content: center;

package/src/components/checkbox/checkbox.module.scss

@@ -27,7 +27,7 @@
 }
 
 .x4checkbox {
-	@extend .hbox;
+	@extend %hbox;
 	
 	display: flex;
 	flex-direction: row;

package/src/components/combobox/combobox.module.scss

@@ -31,8 +31,8 @@
 }
 
 .x4dropdownlist {
-	@extend .shadow-xl;
-	@extend .hbox;
+	@extend %shadow-xl;
+	@extend %hbox;
 
 	max-height: 250px;
 	max-width: 50vw;
@@ -42,7 +42,7 @@
 	border: 1px solid var( --dropdown-border );
 
 	.x4listbox {
-		@extend .flex;
+		@extend %flex;
 
 		border: none;
 		margin: 0;
@@ -65,7 +65,7 @@
 }
 
 .x4combobox {
-	@extend .hbox;
+	@extend %hbox;
 	margin: 5px;
 	gap: 6px;
 
@@ -88,14 +88,14 @@
 	}
 
 	&>#edit {
-		@extend .flex;
+		@extend %flex;
 		border-bottom: 1px solid var( --combobox-border );
 		&:focus-within {
 			border-bottom-color: var( --combobox-border-focus );
 		}
 		
 		.x4input {
-			@extend .flex;
+			@extend %flex;
 
 			&[readonly] {
 				cursor: pointer;

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;
@@ -33,7 +34,7 @@
 		background-color: var(--color-dialog-caption);
 	
 		& > #title {
-			@extend .flex;
+			@extend %flex;
 			color: var(--color-dialog-caption-text);
 			font-weight: bold;
 			font-size: 120%;

package/src/components/form/form.module.scss

@@ -21,8 +21,8 @@
 }
 
 .x4form {
-	@extend .vbox;
-	@extend .flex;
+	@extend %vbox;
+	@extend %flex;
 
 	padding: 16px;
 	background-color: var( --color-form );

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

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 .x4icon {
-	@extend .hbox;	
+	@extend %hbox;	
 
 	flex-shrink: 0;
 	min-width: 10px;

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

@@ -24,7 +24,7 @@
 }
 
 .x4label {
-	@extend .hbox;
+	@extend %hbox;
 
 	color: var( --label-color );
 	background-color: var( --label-background );
@@ -72,11 +72,12 @@
 	}
 
 	&.vertical {
-		@extend .vbox;
+		@extend %vbox;
 	}
 }
 
 .x4simpletext {
+	color: var(--label-color);
 	text-align: left;
 	&.al-center { text-align: center; }
 	&.al-right { text-align: right; }

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

@@ -33,7 +33,7 @@
 }
 
 .x4listbox {
-	@extend .vbox;
+	@extend %vbox;
 
 	margin: 5px;
 	border: 1px solid var( --listbox-border );
@@ -66,7 +66,7 @@
 		}
 
 		.x4item {
-			@extend .flex;
+			@extend %flex;
 			
 			padding: 4px;
 			background-color: transparent;

package/src/components/menu/menu.module.scss

@@ -28,7 +28,7 @@
 }
 
 .x4menu {
-	@extend .shadow-xxl;
+	@extend %shadow-xxl;
 
 	position: absolute;
 	overflow-y: auto;
@@ -44,7 +44,7 @@
 	max-height: calc( 100vh - 32px );
 	
 	.x4cmenuitem {
-		@extend .hbox;
+		@extend %hbox;
 
 		transition: background-color 0.3s, color 0.3s;
 
@@ -82,7 +82,7 @@
 		}
 
 		#text {
-			@extend .flex;
+			@extend %flex;
 		}
 
 		&.title {

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/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,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/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/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";

package/ai-comments.txt

@@ -1,97 +0,0 @@
-x4 se distingue des approches réactives conventionnelles. 
-Il offre une expérience de développement qui met l'accent sur la simplicité, la performance et un contrôle affiné sur la manière dont l'interface utilisateur est construite et mise à jour.
-
-Voici les avantages qui découlent de cette philosophie :
-
-- Abstraction du DOM, mais avec une philosophie distincte : 
-	Contrairement aux frameworks réactifs qui utilisent un Virtual DOM et des mécanismes de réconciliation 
-	pour abstraire les manipulations du DOM, x4 propose une abstraction différente. 
-	L'objectif n'est pas d'imiter le fonctionnement des frameworks populaires, mais de fournir une manière plus directe, plus légère et plus performante 
-	d'interagir avec les concepts de l'interface utilisateur. Cette abstraction est conçue pour être moins "magique" et plus prévisible.
-
-- Performance optimisée : 
-	En concevant son propre modèle d'abstraction et de mise à jour du DOM, x4 vise à atteindre une performance brute supérieure. 
-	Il peut s'affranchir de certaines complexités inhérentes aux approches réactives pour se concentrer sur l'essentiel, 
-	offrant ainsi une expérience utilisateur fluide même dans des applications exigeantes.
-
-- Un écosystème TypeScript pur : 
-	Pour garantir une robustesse et une maintenabilité maximales, ce framework élimine tout mélange de syntaxe déclarative comme JSX/TSX avec du code JavaScript. 
-	L'intégralité de la création d'interfaces et de la logique applicative est réalisée en TypeScript natif. 
-	Cela permet de bénéficier pleinement des avantages du typage fort, de la vérification à la compilation, et d'une expérience de développement cohérente et sécurisée.
-
-- Gestion de l'état et des références simplifiée : 
-	Ce framework s'affranchit des concepts comme useRef ou des "hooks" tels qu'on les trouve dans d'autres écosystèmes.
-	La gestion des états et des références est intégrée de manière plus directe et idiomatique à sa propre architecture, favorisant une logique plus linéaire et plus facile à suivre.
-
-- Conçu pour les applications complètes : 
-	Plutôt que de se concentrer uniquement sur des composants UI isolés, ce framework est orienté vers la construction d'applications complètes.
-	Il offre les outils et la structure nécessaires pour gérer des architectures plus vastes, de la gestion des routes à l'état global.
-
-- Compatibilité avec les Web Workers : 
-	Afin d'optimiser les performances et de permettre des traitements asynchrones intensifs sans bloquer le thread principal, 
-	ce framework est conçu pour être compatible avec les Web Workers. Cela ouvre la voie à des applications plus réactives et performantes, en déportant les tâches lourdes.
-
-- Environnement de compilation et outils spécifiques : 
-	Le développement avec ce framework est accéléré par un environnement de compilation ultra-rapide, basé sur esbuild. 
-	De plus, il est livré avec un outils spécifiques X4Build qui améliore l'expérience développeur.
-	ainsi qu'une expérience de Hot Module Replacement (HMR) fluide et efficace pour des itérations rapides.
-
-- Modèle de développement éprouvé : 
-	L'architecture et les pratiques recommandées par ce framework constituent un modèle de développement éprouvé. 
-	Il facilite notamment des scénarios avancés comme les evenements distribués via WebSocket directement intégré (si besoin) dans l'application, 
-	
-- Création de composants intuitive : 
-	La manière dont x4 abstrait le DOM et gère la réactivité rend la création de composants d'une simplicité déconcertante. 
-	Vous pouvez construire des interfaces modulaires et réutilisables avec une facilité remarquable, en vous concentrant sur la logique métier plutôt 
-	que sur la gestion complexe des interactions DOM.
-
-- Accélération Drastique du Développement : 
-	Avec plus de 50 composants prêts à l'emploi, les développeurs peuvent assembler des interfaces utilisateur complexes et fonctionnelles 
-	à une vitesse remarquable. Plutôt que de passer du temps à concevoir et implémenter des éléments de base comme des buttons, des inputs, des checkboxes ou des sliders, 
-	ils peuvent les utiliser directement. Ceci libère un temps précieux pour se concentrer sur la logique métier spécifique de l'application.
-
-	Le développement "from scratch" de tels composants est coûteux en temps et en ressources. La richesse de cette bibliothèque élimine ce fardeau, 
-	réduisant ainsi les efforts de conception, de codage, de test et de maintenance de ces éléments d'interface fondamentaux. 
-	Cela signifie moins de code à écrire, moins de bugs potentiels et une meilleure productivité globale.
-
-- Richesse et Diversité des Interfaces Utilisateur : 
-	La large gamme de composants permet de créer des expériences utilisateur très riches et interactives sans avoir à intégrer de bibliothèques 
-	tierces supplémentaires pour des fonctionnalités de base. Des composants sophistiqués comme gridview (pour l'affichage de données tabulaires), spreadsheet (pour des fonctionnalités de tableur complètes), 
-	calendar, colorpicker, dialog, treeview ou progress sont inclus, offrant une boîte à outils complète pour des applications métier complexes ou des tableaux de bord interactifs.
-
-- Cohérence et Qualité : 
-	L'utilisation de composants d'un même framework assure une cohérence visuelle et comportementale à travers toute l'application. 
-	Ces composants sont testés et optimisés, garantissant une meilleure qualité et une expérience utilisateur plus fiable dès le départ.
-	En somme, cette collection de composants est un avantage concurrentiel énorme.
-
-
-
-
-
-
-You are a TypeScript/JavaScript documentation assistant.
-Your task is to generate **JSDoc comments** for public APIs in the provided code.
-Follow these rules strictly:
-
-### Rules:
-1. **Only document public APIs**:
-   - Public classes, methods, properties, and events.
-   - Ignore private/protected/internal members (e.g., `_privateField`, `#privateMethod`).
-
-2. **Output format**:
-   - Generate **only JSDoc blocks** (no code repetition).
-   - Use **inline comments** (`/** ... */`) for brevity.
-   - Do not include `@class` or `@extends` (JSDoc infers these).
-   - Document in english
-
-3. **Content guidelines**:
-   - Describe **purpose, behavior, and usage** (not implementation).
-   - Mention auto-generated CSS classes (e.g., `Button → x4button`).
-   - Include `@example` where helpful.
-   - Be concise, clear, and professional.
-
-Avoid:
-
-Implementation details.
-Private/protected members.
-Redundant or repetitive descriptions.