x4js 2.2.45 → 2.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.45",
+  "version": "2.2.47",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",
@@ -33,9 +33,7 @@
     "application"
   ],
   "devDependencies": {
-    "typescript": "^5.8.3"
-  },
-  "dependencies": {
+    "typescript": "^5.8.3",
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0"
   }

package/src/components/button/button.ts

@@ -14,9 +14,10 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
+import { Menu, MenuElement, MenuProps } from 'x4js';
 import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
 import { EventCallback } from '../../core/core_events';
-import { class_ns, UnsafeHtml } from '../../core/core_tools';
+import { class_ns, isFunction, UnsafeHtml } from '../../core/core_tools';
 
 import { Icon } from "../icon/icon"
 
@@ -68,6 +69,8 @@ export interface ButtonProps extends ComponentProps {
 	 * cf. ButtonEvents
 	 */
 	click?: EventCallback<EvClick>;
+
+	menu?: MenuElement[] | (( ) => MenuElement[]);
 }
 
 /**
@@ -131,17 +134,17 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 
 	protected _on_click( ev: MouseEvent ) {
 
-		//if (this.m_props.menu) {
-		//	let menu = new Menu({
-		//		items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
-		//	});
-		//
-		//	let rc = this.getBoundingRect();
-		//	menu.displayAt(rc.left, rc.bottom, 'tl');
-		//}
-		//else {
+		if (this.props.menu) {
+			let menu = new Menu({
+				items: isFunction(this.props.menu) ? this.props.menu() : this.props.menu
+			});
+		
+			let rc = this.getBoundingRect();
+			menu.displayNear(rc, 'top-left', 'bottom-left' );
+		}
+		else {
 			this.fire('click', {} );
-		//}
+		}
 
 		ev.preventDefault();
 		ev.stopPropagation();

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

@@ -17,16 +17,17 @@
 @use "../shared.scss";
 
 :root {
-	--listbox-item-background-sel: var( --accent-background );
+	--listbox-item-color: var( --text-primary );
+	--listbox-icon-color: var( --text-ternary );
+	--listbox-item-color-disabled: var( --disabled-color-dark );
+
 	--listbox-item-color-sel: var( --accent-color );
+	--listbox-item-background-sel: var( --accent-background );
 	--listbox-item-color-sel-disabled: var( --disabled-background );
 
-	--listbox-item-color: var( --text-primary );
-	--listbox-item-color-disabled: var( --disabled-color-dark );
+	--listbox-item-color-hover: var( --text-primary );;
 	--listbox-item-background-hover: var( --background-secondary );
 
-	--listbox-icon-color: var( --text-ternary );
-
 	--listbox-background: white;
 	--listbox-border: var( --border );
 	--listbox-border-focus: var( --accent-background-focus );
@@ -79,6 +80,7 @@
 				}
 			}
 		}
+	}
 
 		.x4item {
 			@extend %flex;
@@ -93,9 +95,10 @@
 				padding: 4px 0;
 			}
 
+		--label-color: var( --listbox-item-color );
+			
 			.x4label,
 			.x4simpletext {
-				color: inherit;
 				padding: 2px 6px;
 			
 				#icon {
@@ -106,12 +109,15 @@
 
 			&:hover {
 				background-color: var( --listbox-item-background-hover );
+			--label-color: var( --listbox-item-color-hover );
 			}
 
 			&.selected {
 				background-color: var( --listbox-item-background-sel );
 				color: var( --listbox-item-color-sel );
 
+			--label-color: var( --listbox-item-color-sel );
+
 				&> .x4label {
 					#icon {
 						color: var( --listbox-item-color-sel );
@@ -133,7 +139,10 @@
 				//color: var(--color-0);
 			//}	
 
-		}
+	}
+
+	&.empty .body .x4viewport {
+		height: 100%;
 	}
 
 	&> #footer {

package/src/components/listbox/listbox.ts

@@ -125,9 +125,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			contextmenu: (e) => this._on_ctx_menu(e),
 		} );
 
-		asap( ( ) => {
 			this.setItems( props.items, false );
-		} );
 	}
 
 	/**
@@ -446,6 +444,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		let update_sel = false;
 
 		if( this._items.length ) {
+			this.removeClass( "empty" );
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
 
@@ -454,6 +453,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			}
 		}
 		else {
+			this.addClass( "empty" );
 			update_sel = oldSel.length>0;
 			this._view.setContent( new Label( { cls: "empty vertical", icon: icons.empty, text: this.props.emptyMsg ?? _tr.global.empty_list } ) );
 		}

package/src/components/menu/menu.ts

@@ -16,11 +16,12 @@
 
 import { Component } from "../../core/component"
 import { DOMEventHandler } from '../../core/core_dom';
-import { Timer, UnsafeHtml, class_ns, isString } from '../../core/core_tools';
+import { Timer, UnsafeHtml, class_ns, isFunction, isString } from '../../core/core_tools';
 
 import { Popup, PopupProps } from '../popup/popup';
 import { Icon } from '../icon/icon';
 
+import icons from "../assets/icons";
 import "./menu.module.scss"
 
 const OPEN_DELAY = 400;
@@ -35,6 +36,7 @@ export interface MenuItem {
 	text: string | UnsafeHtml;
 	menu?: Menu;
 	disabled?: boolean;
+	checked?: boolean | ( () => boolean);
 	click?: DOMEventHandler;
 }
 
@@ -74,8 +76,16 @@ class CMenuItem extends Component {
 			this.addClass( "popup" );
 		}
 
+		let iconId = itm.icon;
+		if( !iconId && itm.checked ) {
+			const chk = isFunction(itm.checked) ? itm.checked() : itm.checked;
+			if( chk ) {
+				iconId = icons.check;
+			}
+		}
+
 		this.setContent( [
-			new Icon({ id:"icon",iconId:itm.icon}), 
+			new Icon({ id:"icon", iconId }), 
 			new Component( { id: "text", content: itm.text } )
 		]);
 

package/src/components/notification/notification.module.scss

@@ -28,10 +28,17 @@
 .x4notification {
 	@extend %shadow-xl;
 
-	padding: 8px;
+	padding: 4px 8px;
 	border: 1px solid var(--notification-border);
 	border-left: 3px solid var( --accent-background );
 	background-color: var( --notification-background );
+	min-width: 250px;
+	max-width: 30vw;
+	position: absolute;
+	
+	&.smooth {
+		transition: top .4s ease;
+	}
 		
 	&> .x4hbox {
 		gap: 8px;
@@ -77,8 +84,8 @@
 		color: var( --color-gray-7 );
 		border: none;
 
-		&:hover {
+		//&:hover {
 			//background-color: var( -- );;
-		}
+		//}
 	}
 }

package/src/components/notification/notification.ts

@@ -15,7 +15,7 @@
  **/
 
 import { ComponentProps } from '../../core/component';
-import { class_ns, Rect, UnsafeHtml } from '../../core/core_tools';
+import { asap, class_ns, Rect, UnsafeHtml } from '../../core/core_tools';
 
 import { Popup } from '../popup/popup';
 import { HBox, VBox } from '../boxes/boxes';
@@ -47,6 +47,8 @@ interface NotificationProps extends ComponentProps {
 
 @class_ns( "x4" )
 export class Notification extends Popup {
+	private static list = new Set<Notification>( );
+
 	constructor( props: NotificationProps ) {
 		super( { } );
 
@@ -85,19 +87,39 @@ export class Notification extends Popup {
 	}
 
 	close( ) {
+		Notification.list.delete( this );
+		asap( ( ) => Notification.updatePositions( ) )
+
 		this.clearTimeout( "close" );
 		super.close( );
 	}
 
 	display( time_in_s = 0 ) {
-		const r = new Rect( 0, 0, window.innerWidth, window.innerHeight );
-		this.displayNear( r, "bottom right", "bottom right", { x: -20, y: -10 } );
-
+		Notification.list.add( this );
 		if( time_in_s ) {
 			this.setTimeout( "close", time_in_s*1000, ( ) => { 
 				this.close() 
 			} );
 		}
+
+		//this.setStyleValue( "top", "9999px" );
+		
+		asap( ( ) => Notification.updatePositions( ) )
+	}
+
+	static updatePositions( ) {
+		const r = new Rect( 0, 0, window.innerWidth, window.innerHeight );
+
+		for( const n of this.list ) {
+			n.addClass( "smooth" );
+			n.displayNear( r, "bottom right", "bottom right", { x: -20, y: -10 }, true );
+			const nr = n.getBoundingRect( );
+			r.height -= nr.height+10;
+			if( r.height<10 ) {
+				r.height = 10;
+			}
+		}
+
 	}
 }
 

package/src/components/popup/popup.ts

@@ -79,9 +79,12 @@ export class Popup<P extends PopupProps = PopupProps, E extends PopupEvents = Po
 	 * 
 	 */
 
-	displayNear( rc: Rect, dst = "top left", src = "top left", offset = {x:0,y:0} ) {
+	displayNear( rc: Rect, dst = "top left", src = "top left", offset = {x:0,y:0}, keep_pos = false ) {
 
+		if( !keep_pos ) {
 		this.setStyle( { left: "0px", top: "0px" } );	// avoid scrollbar
+		}
+
 		this._do_show( );		// to compute size
 		
 		let rm = this.getBoundingRect();

package/src/components/tag/tag.module.scss

@@ -4,27 +4,37 @@
 * @copyright (c) 2026 R-libre ingenierie, all rights reserved.
 **/
 
+:root {
+	--tag-border: var( --border );
+	--tag-border-focus: var( --border-focus );
+	--tag-selection: var( --accent-background );
+	--tag-color: black;
+	--tag-icon-color: var( --tag-color );
+}
+
 .x4tag {
-	color: black;
 	border-radius: 16px;
-	border: 1px solid var( --border );
+	border: 1px solid var( --tag-border );
 	padding: 2px 8px;
 	gap: 4px;
 	font-weight: normal;
+	--label-color: var( --tag-color );
 
 	.x4icon:empty {
 		display: none;
 	}
 
 	.x4icon {
+		height: 1em;
+		color: var( --tag-icon-color );
 	}
 
-	.x4simpletext {
-		color: inherit;
+	&> .x4simpletext {
+		padding: 0;
 	}
 
 	&.alert {
-		color: var( --alert-color );
+		--tag-color: var( --alert-color );
 		background-color: var( --alert-background );
 	}
 }

package/src/components/textarea/textarea.module.scss

@@ -22,24 +22,7 @@
 	--textarea-selection: var( --accent-background );
 }
 
-.x4textarea {
-	margin: 5px;
-
-	.x4label{
-		gap: 0;
-		padding: 4px 0;
-
-		&::after {
-			content: ":"
-		}
-	}
-
-	.x4label:has(.empty) {
-		display: none;
-	}
-
-	textarea {
-		@extend %flex;
+.x4simpletextarea {
 
 		padding: 4px;
 		outline: none;
@@ -60,4 +43,25 @@
 			resize: none;
 		}
 	}
+
+.x4textarea {
+	margin: 5px;
+
+	.x4label{
+		gap: 0;
+		padding: 4px 0;
+
+		&::after {
+			content: ":"
+		}
+	}
+
+	.x4label:has(.empty) {
+		display: none;
+	}
+
+	.x4simpletextarea {
+		@extend %flex;
+
+	}	
 }

package/src/components/textarea/textarea.ts

@@ -42,7 +42,8 @@ interface TextAreaProps extends BaseProps {
  * 
  */
 
-class SimpleTextArea extends Component<TextAreaProps> {
+@class_ns( "x4" )
+export class SimpleTextArea extends Component<TextAreaProps> {
 
 	constructor( props: TextAreaProps ) {
 		super( { ...props, tag: "textarea" } );
@@ -72,6 +73,10 @@ class SimpleTextArea extends Component<TextAreaProps> {
 		return text;
 	}
 
+	scrollToBottom( ) {
+		this.dom.scrollTop = this.dom.scrollHeight;
+	}
+
 	queryInterface<T>(name: string): T {
 		if( name=="form-element" ) {
 			const i: IFormElement = {
@@ -115,6 +120,10 @@ export class TextArea extends VBox {
 		return this._input.getText( );
 	}
 
+	scrollToBottom( ) {
+		this._input.scrollToBottom( );
+	}
+
 	queryInterface<T>(name: string): T {
 		if( name=="form-element" ) {
 			const i: IFormElement = {

package/src/components/treeview/treeview.ts

@@ -206,9 +206,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			keydown: ( ev ) => this._onkey( ev ),
 		});
 
-		asap( ( ) => {
 			this.setItems( props.items );
-		} );
 	}
 
 	/**
@@ -478,8 +476,8 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			this._selitem = undefined;
 		}
 
-		this._selection = undefined;
-		this.fire( "selectionChange", { selection: [], empty: true } );
+			this._selection = undefined;
+			this.fire( "selectionChange", { selection: [], empty: true } );
 	}
 
 	/**

package/src/core/core_state.ts

@@ -5,7 +5,7 @@
 **/
 
 import { CoreEvent, EventMap, EventSource } from './core_events.js';
-import { isPlainObject } from './core_tools.js';
+import { getMemberValue, isPlainObject } from './core_tools.js';
 
 type StateData = boolean | number | string | Date | unknown;
 type State = Record<string, StateData>;
@@ -210,6 +210,11 @@ export class StateManager<T extends State> extends EventSource<StateEvents> {
 			if( _path_matches( e.path, path ) ) {
 				cb( e );
 			}
+			else if( _path_matches( path, e.path ) ) {
+				const ee = { ...e };
+				ee.value = getMemberValue(this._proxy,path );
+				cb( ee );
+			}
 		});
 	}
 }
@@ -224,7 +229,7 @@ export class StateManager<T extends State> extends EventSource<StateEvents> {
  * state.items.push( 4 ); // "items.3 = 4"
  */
 
-export function makeState<T extends State>( initialState: T ): StateProxy<T> {
+export function makeState<T extends Record<keyof T, StateData>>( initialState: T ): StateProxy<T> {
 	return new StateManager( initialState ).proxify( );
 }