x4js 2.1.0-manual.2 → 2.2.0

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "x4js",
-  "version": "2.1.0-manual.2",
-  "description": "X4 framework",
-  "author": "etienne cochard",
-  "license": "MIT",
+  "version": "2.2.0",
   "type": "module",
-  "sideEffects": true,
-  "main": "./src/x4.ts",
-  "module": "./src/x4.ts",
-  "types": "./src/x4.ts",
+  "main": "src/x4.ts",
+  "module": "src/x4.ts",
+  "types": "src/x4.ts",
   "exports": {
-    ".": "./src/x4.ts",
-    "./*": "./src/*.ts"
+    ".": "./src/x4.ts"
+  },
+  "scripts": {
+    "build-publish": "tsx ./publish.ts"
   },
   "files": [
     "src",
@@ -32,8 +30,6 @@
     "application"
   ],
   "devDependencies": {
-    "typescript": "^5.8.3",
-    "x4build": "^1.6.8",
-    "esbuild-sass-plugin": "^3.3"
+    "typescript": "^5.8.3"
   }
 }

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/button/button.ts

@@ -14,11 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component.ts"
-import { EventCallback } from '../../core/core_events.ts';
-import { class_ns, UnsafeHtml } from '../../core/core_tools.ts';
+import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
+import { EventCallback } from '../../core/core_events';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
-import { Icon } from "../icon/icon.ts"
+import { Icon } from "../icon/icon"
 
 import "./button.module.scss";
 

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,18 +22,20 @@
 }
 
 .x4dialog {
-	@extend .shadow-xl, .vbox;
+	@extend %shadow-xl;
+	@extend %vbox;
 
 	position: absolute !important;
 	background-color: white;
 	border: 1px solid var( --border-dark );
+	max-width: 99vw;
 	
 	&> .caption {
 		padding: 8px;
 		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,9 +15,9 @@
  **/
 
 
-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 { DataModel, DataStore, DataView, DataRecord, EvViewChange, SortCallback } from '../../core/core_data';
 import { EventCallback } from '../../core/core_events';
 import { kbNav } from '../../core/core_tools';
 
@@ -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;
@@ -55,7 +59,7 @@ export interface GridColumn {
 	formatter?: (input: any) => string;	// for "custom" type
 	type?: ColType;
 	cls?: string;
-	sortable?: boolean;
+	sortable?: boolean | SortCallback;
 	footer_val?: string;
 	classifier?: CellClassifier;
 }
@@ -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?: {
+		field_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.field_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) {
@@ -612,7 +625,8 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			this._dataview.sort([{
 				field: cdata.id,
 				ascending: asc,
-				numeric: num
+				numeric: num,
+				callback: cdata.sortable instanceof Function ? cdata.sortable : undefined,
 			}]);
 
 			this._update(true);
@@ -785,6 +799,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 +943,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 +1019,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 +1034,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 +1051,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 +1138,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 +1222,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 +1238,9 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		}
 
 		this._selection.clear();
+		if( notify ) {
+			this.fire("selectionChange", { selection: [], empty: true } );
+		}
 	}
 
 	/**
@@ -1274,3 +1313,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,57 @@
 
 }
 
+
+.x4progressionbox {
+	min-height: 200px;
+	min-width: 500px;
+
+	&> .x4form {
+		min-height: unset;
+	}
+
+	& .x4form {
+		min-width: 400px;
+		gap: 8px;
+
+		&> .x4hbox {
+			flex-grow: 1;
+			align-items: stretch;
+			.right {
+				flex-grow: 1;
+				gap: 8px;
+				display: grid;
+    			grid-template-rows: auto auto 1fr;
+			}
+		}
+
+		.x4icon {
+			    height: 64px;
+				animation: rotating 3s linear infinite;
+				fill: var(--accent-background);
+				align-self: center;
+		}
+
+		#title {
+			padding: 4px 16px;
+			line-height: 1.8em;
+		}
+
+		.x4progress {
+			margin: 0 16px;
+		}
+
+		#sub-text {
+			flex-grow: 1;
+			max-height: 400px;
+			overflow: auto;
+			background-color: #f5f5f5;
+			padding: 4px 8px;
+			margin: 0 16px;
+
+			.x4simpletext {
+				white-space: nowrap;
+			}
+		}
+	}
+}