x4js 2.2.44 → 2.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.44",
+  "version": "2.2.46",
   "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/listbox/listbox.module.scss

@@ -136,6 +136,10 @@
 		}
 	}
 
+	&.empty .body .x4viewport {
+		height: 100%;
+	}
+
 	&> #footer {
 		border-top: 1px solid var(--border);
 		margin: 0;

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

@@ -28,10 +28,12 @@
 .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;
 		
 	&> .x4hbox {
 		gap: 8px;
@@ -77,8 +79,8 @@
 		color: var( --color-gray-7 );
 		border: none;
 
-		&:hover {
+		//&:hover {
 			//background-color: var( -- );;
-		}
+		//}
 	}
 }

package/src/components/notification/notification.ts

@@ -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,34 @@ export class Notification extends Popup {
 	}
 
 	close( ) {
+		Notification.list.delete( this );
 		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() 
 			} );
 		}
+
+		Notification.updatePositions( )
+	}
+
+	static updatePositions( ) {
+		const r = new Rect( 0, 0, window.innerWidth, window.innerHeight );
+
+		for( const n of this.list ) {
+			n.displayNear( r, "bottom right", "bottom right", { x: -20, y: -10 } );
+			const nr = n.getBoundingRect( );
+			r.height -= nr.height+10;
+			if( r.height<10 ) {
+				r.height = 10;
+			}
+		}
+
 	}
 }
 

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

@@ -123,10 +123,7 @@ class CTreeViewItem extends Box {
 				this.addClass( "folder" )
 				this.setClass( "open", item.open );
 
-				asap( ( ) => {
-					this.setItems( item.children );
-				} );
-
+				this.setItems( item.children );
 				this._icon.addDOMEvent( "click", ( ev )=>this.toggle(ev) );
 			}
 		}
@@ -209,7 +206,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			keydown: ( ev ) => this._onkey( ev ),
 		});
 
-		this.setItems( props.items );
+			this.setItems( props.items );
 	}
 
 	/**
@@ -479,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( );
 }