x4js 2.0.12 → 2.0.14

package/lib/src/components/menu/menu.module.scss

@@ -1,108 +1,117 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file menu.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "../shared.scss";
-
-:root {
-	--menu-background: var( --background-primary );
-	--menu-border: var( --border-hover );
-
-	--menuitem-color: var( --text-ternary );;
-	--menuitem-background-active: var( --accent-background-active );
-	--menuitem-color-active: var( --accent-color-active );
-	--menuitem-background-hover: var( --accent-background-hover );
-	--menuitem-color-hover: var( --accent-color-hover );
-}
-
-.x4menu {
-	@extend .shadow-lg;
-
-	position: absolute;
-	overflow-y: scroll;
-
-	border-radius: var(--bradius);
-	padding: 8px 0;
-	min-width: 150px;
-	
-	background-color: var(--menu-background);
-	border: 1px solid var(--menu-border);
-
-	max-height: calc( 100vh - 32px );
-	
-	.x4cmenuitem {
-		@extend .hbox;
-
-		transition: background-color 0.3s, color 0.3s;
-
-		align-items: center;
-		color: var(--menuitem-color);
-		
-		padding: 6px;
-		gap: 10px;
-
-		cursor: pointer;
-
-		#icon {
-			width: 16px;
-			height: 16px;
-		}
-
-		#text {
-			@extend .flex;
-		}
-
-		&.title {
-			color: var( --text-primary );
-			cursor: auto;
-			margin-left: -16px;
-			margin-top: -6px;
-			font-weight: 600;
-		}
-
-		&.popup {
-			&:after {
-				content: url("./caret-right-solid.svg");
-				width: 6px;
-			}
-		}
-
-		&:hover:not(.title),
-		&.opened {
-			background-color: var(--menuitem-background-hover);
-			color: var(--menuitem-color-hover);
-		}
-
-		&:active:not(.title) {
-			background-color: var(--menuitem-background-active);
-			color: var(--menuitem-color-active);
-		}
-
-		&[disabled] {
-			&:hover {
-				background-color: var(--disabled-background) !important;
-			}
-			color: var( --disabled-color-dark ) !important;
-		}
-
-		transition: background-color 0.1s;
-	}
-
-	.x4cmenusep {
-		padding-top: 4px;
-		border-bottom: 1px solid var(--border);
-		margin-bottom: 4px;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file menu.module.scss
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+@use "../shared.scss";
+
+:root {
+	--menu-background: var( --background-primary );
+	--menu-border: var( --border-hover );
+
+	--menuitem-color: var( --text-ternary );;
+	--menuitem-background-active: var( --accent-background-active );
+	--menuitem-color-active: var( --accent-color-active );
+	--menuitem-background-hover: var( --accent-background-hover );
+	--menuitem-color-hover: var( --accent-color-hover );
+}
+
+.x4menu {
+	@extend .shadow-lg;
+
+	position: absolute;
+	overflow-y: auto;
+
+	border-radius: var(--bradius);
+	padding: 8px 0;
+	min-width: 150px;
+	
+	background-color: var(--menu-background);
+	border: 1px solid var(--menu-border);
+
+	max-height: calc( 100vh - 32px );
+	
+	.x4cmenuitem {
+		@extend .hbox;
+
+		transition: background-color 0.3s, color 0.3s;
+
+		align-items: center;
+		color: var(--menuitem-color);
+		
+		padding: 6px;
+		gap: 10px;
+
+		cursor: pointer;
+
+		#icon {
+			width: 16px;
+			height: 16px;
+			
+			.fa-primary {
+				fill: var( --color-primary-a50 );
+			}
+
+			.fa-secondary {
+				fill: var( --color-primary-a30 );
+				opacity: 1;
+			}
+		}
+
+		#text {
+			@extend .flex;
+		}
+
+		&.title {
+			color: var( --text-primary );
+			cursor: auto;
+			margin-left: -16px;
+			margin-top: -6px;
+			font-weight: 600;
+		}
+
+		&.popup {
+			&:after {
+				content: url("./caret-right-solid.svg");
+				width: 6px;
+			}
+		}
+
+		&:hover:not(.title),
+		&.opened {
+			background-color: var(--menuitem-background-hover);
+			color: var(--menuitem-color-hover);
+		}
+
+		&:active:not(.title) {
+			background-color: var(--menuitem-background-active);
+			color: var(--menuitem-color-active);
+		}
+
+		&[disabled] {
+			&:hover {
+				background-color: var(--disabled-background) !important;
+			}
+			color: var( --disabled-color-dark ) !important;
+		}
+
+		transition: background-color 0.1s;
+	}
+
+	.x4cmenusep {
+		padding-top: 4px;
+		border-bottom: 1px solid var(--border);
+		margin-bottom: 4px;
+	}
 }

package/lib/src/components/menu/menu.ts

@@ -1,168 +1,174 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file menu.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component } from "../../core/component"
-import { DOMEventHandler } from '../../core/core_dom';
-import { Timer, UnsafeHtml, isString } from '../../core/core_tools';
-
-import { Popup, PopupProps } from '../popup/popup';
-import { Icon } from '../icon/icon';
-
-import "./menu.module.scss"
-
-const OPEN_DELAY = 400;
-
-/**
- * 
- */
-
-export interface MenuItem {
-	cls?: string;
-	icon?: string;
-	text: string | UnsafeHtml;
-	menu?: Menu;
-	disabled?: true;
-	click?: DOMEventHandler;
-}
-
-type MenuElement = MenuItem | Component | string;
-
-export interface MenuProps extends Omit<PopupProps,"content"> {
-	items: MenuElement[];
-}
-
-/**
- * 
- */
-
-class CMenuSep extends Component {
-	constructor( ) {
-		super( { } );
-	}
-}
-
-
-const openTimer = new Timer( );
-
-/**
- * 
- */
-
-class CMenuItem extends Component {
-
-	private menu: Menu;
-	
-	constructor( itm: MenuItem ) {
-		super( { disabled: itm.disabled, cls: itm.cls } );
-
-		if( itm.menu ) {
-			this.addClass( "popup" );
-		}
-
-		this.setContent( [
-			new Icon({ id:"icon",iconId:itm.icon}), 
-			new Component( { id: "text", content: itm.text } )
-		]);
-
-		if( itm.menu ) {
-			this.menu = itm.menu;
-			
-			this.addDOMEvent( "mouseenter", ( ) => this.openSub( true ) );
-			this.addDOMEvent( "click", ( ) => this.openSub( false ) );
-			this.addDOMEvent( "mouseleave", ( ) => this.closeSub() );
-			
-			this.menu.on( "opened", ( ) => this.addClass( "opened" ) );
-			this.menu.on( "closed", ( ) => this.removeClass( "opened" ) );
-		}
-		else {
-			this.addDOMEvent( "mouseenter", ( ) => { openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); } );
-			this.addDOMEvent( "click", ( ) => {
-				this.dismiss( false );
-				if( itm.click ) {
-					itm.click( new Event("click") );
-				}
-			} );
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	dismiss( after: boolean ) {
-		const menu = this.parentElement( Menu );
-		if( menu ) {
-			menu.dismiss( after );
-		}
-	}
-
-
-	/**
-	 * 
-	 */
-
-	openSub( delayed: boolean ) {
-		const open = ( ) => {
-			this.dismiss( true );
-		
-			const rc = this.getBoundingRect( );
-			this.menu.displayAt( rc.right-4, rc.top );
-		}
-
-		if( delayed ) {
-			openTimer.setTimeout( "open", OPEN_DELAY, open );
-		}
-		else {
-			openTimer.clearTimeout( "open" );
-			open( );
-		}
-	}
-
-	closeSub( ) {
-		openTimer.clearTimeout( "open" );
-	}
-}
-
-/**
- * 
- */
-
-export class Menu extends Popup {
-	
-	constructor( props: MenuProps ) {
-		super( { ...props, autoClose: "menu", modal: false } );
-
-		this.addClass( "x4vbox" );
-
-		const children = props.items?.map( itm => {
-			if( itm==="-" ) {
-				return new CMenuSep( );
-			}
-			else if( isString(itm) ) {
-				return new CMenuItem( { text: itm, click: null, cls: 'title' } );
-			}
-			else if( itm instanceof Component ) {
-				return itm;
-			}
-			else {
-				return new CMenuItem( itm );
-			}
-		});
-
-		this.setContent( children );
-	}
-}
-
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file menu.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2024 R-libre ingenierie
+ *
+ * Use of this source code is governed by an MIT-style license 
+ * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
+ **/
+
+import { Component } from "../../core/component"
+import { DOMEventHandler } from '../../core/core_dom';
+import { Timer, UnsafeHtml, class_ns, isString } from '../../core/core_tools';
+
+import { Popup, PopupProps } from '../popup/popup';
+import { Icon } from '../icon/icon';
+
+import "./menu.module.scss"
+
+const OPEN_DELAY = 400;
+
+/**
+ * 
+ */
+
+export interface MenuItem {
+	cls?: string;
+	icon?: string;
+	text: string | UnsafeHtml;
+	menu?: Menu;
+	disabled?: true;
+	click?: DOMEventHandler;
+}
+
+type MenuElement = MenuItem | Component | string;
+
+export interface MenuProps extends Omit<PopupProps,"content"> {
+	items: MenuElement[];
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+class CMenuSep extends Component {
+	constructor( ) {
+		super( { } );
+	}
+}
+
+
+const openTimer = new Timer( );
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+class CMenuItem extends Component {
+
+	private menu: Menu;
+	
+	constructor( itm: MenuItem ) {
+		super( { disabled: itm.disabled, cls: itm.cls } );
+
+		if( itm.menu ) {
+			this.addClass( "popup" );
+		}
+
+		this.setContent( [
+			new Icon({ id:"icon",iconId:itm.icon}), 
+			new Component( { id: "text", content: itm.text } )
+		]);
+
+		if( itm.menu ) {
+			this.menu = itm.menu;
+			
+			this.addDOMEvent( "mouseenter", ( ) => this.openSub( true ) );
+			this.addDOMEvent( "click", ( ) => this.openSub( false ) );
+			this.addDOMEvent( "mouseleave", ( ) => this.closeSub() );
+			
+			this.menu.on( "opened", ( ) => this.addClass( "opened" ) );
+			this.menu.on( "closed", ( ) => this.removeClass( "opened" ) );
+		}
+		else {
+			this.addDOMEvent( "mouseenter", ( ) => { 
+				openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); 
+			} );
+
+			this.addDOMEvent( "click", ( ) => {
+				this.dismiss( false );
+				if( itm.click ) {
+					itm.click( new Event("click") );
+				}
+			} );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	dismiss( after: boolean ) {
+		const menu = this.parentElement( Menu );
+		if( menu ) {
+			menu.dismiss( after );
+		}
+	}
+
+
+	/**
+	 * 
+	 */
+
+	openSub( delayed: boolean ) {
+		const open = ( ) => {
+			this.dismiss( true );
+		
+			const rc = this.getBoundingRect( );
+			this.menu.displayAt( rc.right-4, rc.top );
+		}
+
+		if( delayed ) {
+			openTimer.setTimeout( "open", OPEN_DELAY, open );
+		}
+		else {
+			openTimer.clearTimeout( "open" );
+			open( );
+		}
+	}
+
+	closeSub( ) {
+		openTimer.clearTimeout( "open" );
+	}
+}
+
+/**
+ * 
+ */
+
+@class_ns( "x4" )
+export class Menu extends Popup {
+	
+	constructor( props: MenuProps ) {
+		super( { ...props, autoClose: "menu", modal: false } );
+
+		this.addClass( "x4vbox" );
+
+		const children = props.items?.map( itm => {
+			if( itm==="-" ) {
+				return new CMenuSep( );
+			}
+			else if( isString(itm) ) {
+				return new CMenuItem( { text: itm, click: null, cls: 'title' } );
+			}
+			else if( itm instanceof Component ) {
+				return itm;
+			}
+			else {
+				return new CMenuItem( itm );
+			}
+		});
+
+		this.setContent( children );
+	}
+}
+