x4js 2.2.8 → 2.2.10

package/package.json

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

package/src/components/base.scss

@@ -24,6 +24,19 @@
 	@extend %flex;
 }
 
+.x4fit-h {
+	width: stretch;
+}
+
+.x4fit-v {
+	height: stretch;
+}
+
+.x4fit {
+	height: stretch;
+	width: stretch;
+}
+
 .fit {
 	@extend %fit;
 }
@@ -86,4 +99,9 @@
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     animation-direction: reverse;
+}
+
+option:checked {
+ 	background-color: var( --accent-background );
+  	color: var( --accent-color );
 }

package/src/components/btngroup/btngroup.ts

@@ -140,6 +140,14 @@ export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
 
 				b.addClass( def.join(" ") );
 			}
+			else if( b instanceof Button ) {
+				const btn = b as Button;
+				if( !btn.props.click && btn.props.id ) {
+					btn.on( "click", ( ) => {
+						this.fire( "btnclick", { button: btn.props.id} );
+					} );
+				}
+			}
 
 			childs.push( b );
 		});

package/src/components/dialog/dialog.ts

@@ -20,7 +20,7 @@ import { BtnGroup, BtnGroupItem } from "../btngroup/btngroup"
 import { HBox } from '../boxes/boxes';
 import { Label } from '../label/label';
 import { CoreEvent, EventCallback } from '../../core/core_events';
-import { class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
+import { asap, class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
 import { ComponentEvent } from '../../core/component';
 import { Button } from '../button/button';
 
@@ -228,6 +228,26 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 	getBtnBar( ) {
 		return this.query<BtnGroup>("#btnbar");		
 	}
+
+	/**
+	 * ! cannot stop close action
+	 */
+
+	async showAsync( ) : Promise<string> {
+	
+		return new Promise( (resolve ) => {
+
+			this.on( "btnclick", ( ev ) => {
+				asap( ( ) => {
+					this.close( );
+					resolve( ev.button );
+				});
+			});
+
+			this.show();
+		} );
+	}
+
 }
 
 

package/src/components/header/header.ts

@@ -116,7 +116,7 @@ export class Header extends HBox<HeaderProps> {
 
 			const flex = c.getInternalData( "flex" );
 			if( flex ) {
-				width = Math.min( unit*flex, rest );
+				width = Math.floor(Math.min( unit*flex, rest ));
 				rest -= width;
 			}
 			else {

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

@@ -62,17 +62,25 @@
 		position: relative;
 
 		&> .x4viewport {
+			overflow: hidden;
 			display: table;
 		}
 
 		.x4item {
 			@extend %flex;
 			
+
 			padding: 4px;
 			background-color: transparent;
 			color: var( --text-primary );
 
-			&> .x4label {
+			// multicolumns
+			&:has( >.x4hbox ) {
+				padding: 4px 0;
+			}
+
+			.x4label,
+			.x4simpletext {
 				color: inherit;
 				padding: 2px 6px;
 			
@@ -108,6 +116,7 @@
 				//background-color: var( --color-80 );
 				//color: var(--color-0);
 			//}	
+
 		}
 	}
 
@@ -130,6 +139,31 @@
 				.x4icon {
 					height: 1.5em;
 					width: 1.5em;
+
+					.fa-primary, .fa-secondary {
+						fill:  var( --accent-background );
+					}
+				}
+
+				&.icon-danger {
+					.x4icon {
+						.fa-secondary {
+							fill: var( --disabled-color-dark);
+							opacity: 0.7;
+						}
+
+						.fa-primary {
+							fill: var( --alert-background );
+						}
+					}
+				}
+
+				&.icon-success {
+					.x4icon {
+						.fa-primary {
+							fill: var( --success-background );
+						}
+					}
 				}
 
 				&:hover{

package/src/components/messages/circle-question.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/></svg>

package/src/components/messages/messages.ts

@@ -17,6 +17,8 @@ import { Progress } from '../components.js';
 import "./messages.module.scss";
 
 import error_icon from "./circle-exclamation.svg";
+import question_icon from "./circle-question.svg";
+
 import pen_icon from "./pen-field.svg";
 import spinner from "./spinner.svg"
 
@@ -40,7 +42,16 @@ export class MessageBox extends Dialog<DialogProps>
 	 * 
 	 */
 
-	private static _create( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) {
+	private static _create( msg: string | UnsafeHtml, buttons: BtnGroupItem[], title: string, icon_type: "error" | "question" ) {
+
+		let icon = error_icon;
+		switch( icon_type ) {
+			case "question": {
+				icon = question_icon;
+				break;
+			}
+		}
+
 		const box = new MessageBox({ 
 			modal: true,
 			title: title ?? _tr.global.error,
@@ -65,9 +76,9 @@ export class MessageBox extends Dialog<DialogProps>
 	 * display a messagebox
 	 */
 
-	static show( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ): MessageBox {
+	static show( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string, icon_type?: "error" | "question" ): MessageBox {
 
-		const box = this._create( msg, buttons, title );
+		const box = this._create( msg, buttons, title, icon_type );
 		box.on( "btnclick", ( ev ) => {
 			asap( ( ) => {
 				box.close() 
@@ -82,10 +93,10 @@ export class MessageBox extends Dialog<DialogProps>
 	 * idem with promise
 	 */
 
-	static async showAsync( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) : Promise<string> {
+	static async showAsync( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string, icon_type?: "error" | "question" ) : Promise<string> {
 
 		return new Promise( (resolve, reject ) => {
-			const box = this._create( msg, buttons, title );
+			const box = this._create( msg, buttons, title, icon_type );
 			box.on( "btnclick", ( ev ) => {
 				asap( ( ) => {
 					resolve( ev.button );
@@ -99,6 +110,7 @@ export class MessageBox extends Dialog<DialogProps>
 	}
 }
 
+// :: INPUT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 interface InputOptions {
 	password?: boolean;
@@ -168,6 +180,8 @@ export class InputBox extends Dialog<DialogProps>
 }
 
 
+// :: PROMPT ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
 
 @class_ns( "x4" )
 export class PromptBox extends Dialog<DialogProps>
@@ -237,6 +251,9 @@ export class PromptBox extends Dialog<DialogProps>
 	}
 }
 
+
+// :: PROGRESS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
 @class_ns( "x4" )
 export class ProgressionBox  extends Dialog {
 

package/src/components/monaco/readme.md

@@ -1,3 +1,4 @@
 # using monaco in x4
 
-you must copy ./bin/* in your destination folder
+you must copy ./bin/* in your destination folder ex. monaco folder 
+see demo/components/monaco for a full example.

package/src/components/propgrid/progrid.module.scss

@@ -10,7 +10,7 @@
 
 .x4propertygrid {
 	background: var( --propertygrid-background );
-	border: 1px solid var(--color-primary-a50);
+	border: 1px solid var(--border);
 	overflow-y: auto;
     flex-basis: 0;
 	
@@ -40,7 +40,7 @@
 
 		&:not( :last-child ) {
 			border-bottom: 1px solid var(--color-primary-a50);
-			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
+			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 		
 		display: flex;

package/src/components/select/select.module.scss

@@ -1,9 +1,32 @@
 
 
-.x4select {
-	padding: 4px;
+.x4select,
+::picker(select) {
+	appearance: base-select;
+
+	padding: 5px;
 	outline: none;
 
+	border-radius: 0;
 	border: 1px solid var( --border );
 	background-color: white;
-}
+}
+
+//-- global saddly
+option {
+	padding: 5px;
+}
+
+option:checked {
+ 	background-color: var( --accent-background );
+  	color: var( --accent-color );
+}
+
+option:hover {
+ 	background-color: var( --accent-background-focus );
+  	color: var( --accent-color );
+}
+
+option::checkmark {
+    display: none;
+}

package/src/components/tabs/tabs.ts

@@ -153,7 +153,7 @@ export class Tabs extends Box<TabsProps> {
 	constructor( props: TabsProps ) {
 		super( props );
 
-		this.setClass( "vertical", props.vertical );
+		this.setClass( "vertical", props.vertical ?? false );
 		
 		const pages = props.items?.map( x => {
 			return {

package/src/components/treeview/treeview.ts

@@ -380,7 +380,9 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			}
 
 			if( newSel ) {
-				const nsel = this.query( `[data-id="${newSel}"]`)
+				//const nsel = this.query( `[data-id="${newSel}"]`)
+				const all = this._view.enumChildComponents( true );
+				const nsel = all.find( x => x.getInternalData("id")===newSel )
 				this._selectItem( newSel, nsel );
 				return true;
 			}
@@ -393,7 +395,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		let all: { id: ListboxID, level: number }[] = [];
 		
 		const build = ( x: TreeItem, level: number ) => {
-			all.push( {id: x.id+"", level } );
+			all.push( {id: x.id, level } );
 			if( x.children && x.open ) {
 				x.children.forEach( y => build( y, level+1 ) );
 			}

package/src/core/component.ts

@@ -14,12 +14,12 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools.ts';
-import { CoreElement } from './core_element.ts';
-import { ariaValues, unitless } from './core_styles.ts';
-import { CoreEvent, EventMap } from './core_events.ts';
-import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom.ts';
-import { Application, EvMessage } from './core_application.ts';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools';
+import { CoreElement } from './core_element';
+import { ariaValues, unitless } from './core_styles';
+import { CoreEvent, EventMap } from './core_events';
+import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom';
+import { Application, EvMessage } from './core_application';
 
 interface RefType<T extends Component> {
 	dom: T;
@@ -1198,6 +1198,7 @@ export function wrapDOM( el: HTMLElement ): Component {
  * Automatically generates CSS class: `x4flex`.
  */
 
+@class_ns( "x4" )
 export class Flex extends Component {
 	constructor( ) {
 		super({})
@@ -1214,6 +1215,7 @@ export class Flex extends Component {
  * ```
  */
 
+@class_ns( "x4" )
 export class Space extends Component {
 	constructor( width?: number|string, cls?: string ) {
 		super( { width, cls } )