x4js 2.2.46 → 2.2.47

package/package.json

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

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,6 @@
 				//color: var(--color-0);
 			//}	
 
-		}
 	}
 
 	&.empty .body .x4viewport {

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

@@ -34,6 +34,11 @@
 	background-color: var( --notification-background );
 	min-width: 250px;
 	max-width: 30vw;
+	position: absolute;
+	
+	&.smooth {
+		transition: top .4s ease;
+	}
 		
 	&> .x4hbox {
 		gap: 8px;

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';
@@ -88,6 +88,8 @@ export class Notification extends Popup {
 
 	close( ) {
 		Notification.list.delete( this );
+		asap( ( ) => Notification.updatePositions( ) )
+
 		this.clearTimeout( "close" );
 		super.close( );
 	}
@@ -100,14 +102,17 @@ export class Notification extends Popup {
 			} );
 		}
 
-		Notification.updatePositions( )
+		//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.displayNear( r, "bottom right", "bottom right", { x: -20, y: -10 } );
+			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 ) {

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 );
 	}
 }