x4js 2.2.8 → 2.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "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/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 } )