x4js 2.0.20 → 2.0.21

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

@@ -1,174 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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;
-}
-
-export 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" } );
-
-		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 );
-	}
-}
-

package/lib/src/components/messages/circle-exclamation.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

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

@@ -1,92 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file messages.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.
- **/
-
-:root {
-	
-	--msgbox-caption-background: var( --alert-background );
-	--msgbox-caption-color: var( --alert-color );
-
-	--msgbox-icon-color:  var( --alert-background );
-}
-
-.x4messagebox {
-	max-width: 60vw;
-
-	& > .caption {
-		background-color: var( --msgbox-caption-background );
-
-		& > #title {
-			color: var( --msgbox-caption-color );
-		}
-	}
-
-	& .x4form {
-		min-width: 400px;
-		.x4icon {
-			color: var( --msgbox-icon-color );
-			height: 96px;
-		}
-
-		.x4label {
-			padding: 16px;
-			line-height: 1.8em;
-		}
-	}
-}
-
-.x4inputbox,
-.x4promptbox {
-	max-width: 60vw;
-
-	& > .caption {
-		background-color: var( --msgbox-caption-background );
-
-		& > #title {
-			color: var( --msgbox-caption-color );
-		}
-	}
-
-	& .x4form {
-		min-width: 400px;
-		.x4icon {
-			color: var( --msgbox-icon-color );
-			height: 64px;
-		}
-
-		.x4vbox {
-			padding: 16px;
-			gap: 16px;
-
-			.x4label {
-				line-height: 1.8em;
-			}
-
-			justify-content: center;
-		}
-	}
-
-	input {
-		padding: 8px;
-		border: 1px solid var( --border );
-
-		&:invalid {
-			border-color: var( --input-error );
-		}
-	}
-
-
-}
-

package/lib/src/components/messages/messages.ts

@@ -1,215 +0,0 @@
-
-// :: MESSAGEBOX ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-
-import { _tr } from '../../core/core_i18n';
-import { asap, class_ns, UnsafeHtml } from '../../core/core_tools';
-
-import { HBox, VBox } from '../boxes/boxes';
-import { Icon } from '../icon/icon';
-import { Label } from '../label/label';
-import { Dialog, DialogProps } from "../dialog/dialog"
-import { Form } from '../form/form';
-import { BtnGroupItem } from '../btngroup/btngroup';
-import { Input } from '../input/input';
-
-import "./messages.module.scss";
-
-import error_icon from "./circle-exclamation.svg";
-import pen_icon from "./pen-field.svg";
-import { Component } from '../../core/component';
-
-export interface MessageBoxProps extends DialogProps {
-	message: string;
-	click: (button: string) => void;
-}
-
-/**
- * 
- */
-
-@class_ns( "x4" )
-export class MessageBox extends Dialog<DialogProps>
-{
-	constructor(props: DialogProps) {
-		super(props);
-	}
-
-	/**
-	 * 
-	 */
-
-	private static _create( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) {
-		const box = new MessageBox({ 
-			modal: true,
-			title: title ?? _tr.global.error,
-			movable: true,
-			form: new Form( {
-				content: [
-					new HBox( {
-						content: [
-							new Icon( { iconId: error_icon }),
-							new Label( { text: msg } ),
-						]
-					}),
-				]
-			}),
-			buttons: buttons ?? [ "ok.outline","cancel.outline" ]
-		});
-
-		return box;
-	}
-
-	/**
-	 * display a messagebox
-	 */
-
-	static show( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ): MessageBox {
-
-		const box = this._create( msg, buttons, title );
-		box.on( "btnclick", ( ev ) => {
-			asap( ( ) => {
-				box.close() 
-			});
-		});
-
-		box.show();
-		return box;
-	}
-
-	/**
-	 * idem with promise
-	 */
-
-	static async showAsync( msg: string | UnsafeHtml, buttons?: BtnGroupItem[], title?: string ) : Promise<string> {
-
-		return new Promise( (resolve, reject ) => {
-			const box = this._create( msg, buttons, title );
-			box.on( "btnclick", ( ev ) => {
-				asap( ( ) => {
-					resolve( ev.button );
-					box.close() 
-				});
-			});
-
-			box.show();
-		} );
-
-	}
-}
-
-
-@class_ns( "x4" )
-export class InputBox extends Dialog<DialogProps>
-{
-	constructor(props: DialogProps) {
-		super(props);
-	}
-
-	getValue( ) {
-		const input = this.query<Input>( "input" );
-		return input.getValue( );
-	}
-
-	private static _create( msg: string | UnsafeHtml, value: string, title: string ) {
-		const box = new InputBox({ 
-			modal: true,
-			title,
-			movable: true,
-			form: new Form( {
-				content: [
-					new HBox( {
-						content: [
-							new Icon( { iconId: pen_icon }),
-							new VBox( { flex: 1, content: [
-								new Label( { text: msg } ),
-								new Input( { value, type: "text" } )
-							]})
-						]
-					}),
-				]
-			}),
-			buttons: [ "ok.outline.default","cancel.outline" ]
-		});
-	
-		return box;
-	}
-
-	/**
-	 * idem with promise
-	 */
-
-	static async showAsync( msg: string | UnsafeHtml, value: string, title?: string ) : Promise<string> {
-
-		return new Promise( (resolve, reject ) => {
-
-			const box = this._create( msg, value, title );
-		
-			box.on( "btnclick", ( ev ) => {
-				asap( ( ) => {
-					resolve( ev.button=="ok" ? box.getValue( ) : null );
-					box.close() 
-				});
-			});
-
-			box.show();
-		} );
-
-	}
-}
-
-
-
-@class_ns( "x4" )
-export class PromptBox extends Dialog<DialogProps>
-{
-	constructor(props: DialogProps) {
-		super(props);
-	}
-
-	private static _create( msg: string | UnsafeHtml, editor: Component, title: string ) {
-		const box = new PromptBox({ 
-			modal: true,
-			title,
-			movable: true,
-			form: new Form( {
-				content: [
-					new HBox( {
-						content: [
-							new Icon( { iconId: pen_icon }),
-							new VBox( { flex: 1, cls: "right", content: [
-								new Label( { text: msg } ),
-								editor
-							]})
-						]
-					}),
-				]
-			}),
-			buttons: [ "ok.outline.default","cancel.outline" ]
-		});
-	
-		return box;
-	}
-
-	/**
-	 * idem with promise
-	 */
-
-	static async showAsync( msg: string | UnsafeHtml, editor: Component, title?: string ) : Promise<string> {
-
-		return new Promise( (resolve ) => {
-
-			const box = this._create( msg, editor, title );
-		
-			box.on( "btnclick", ( ev ) => {
-				asap( ( ) => {
-					resolve( ev.button );
-					box.close() 
-				});
-			});
-
-			box.show();
-		} );
-
-	}
-}
-

package/lib/src/components/messages/pen-field.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 128l32 0 224 0 32 0 0 64-32 0L64 192l0 256 448 0 0-128 0-32 64 0 0 32 0 160 0 32-32 0L32 512 0 512l0-32L0 160l0-32z"/><path class="fa-primary" d="M288 352l16-112L468.7 75.3l96 96L400 336 288 352zM587.3 148.7l-96-96L544 0l96 96-52.7 52.7zM96 288l64 0 0 64-64 0 0-64zm160 0l0 64-64 0 0-64 64 0z"/></svg>