x4js 2.0.5 → 2.0.7

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

@@ -0,0 +1,103 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file listbox.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 {
+	--listbox-item-background-sel: var( --accent-background );
+	--listbox-item-color-sel: var( --accent-color );
+	--listbox-item-color-sel-disabled: var( --disabled-background );
+
+	--listbox-item-color: var( --text-primary );
+	--listbox-item-color-disabled: var( --disabled-color-dark );
+	--listbox-item-background-hover: var( --background-secondary );
+
+	--listbox-border: var( --border );
+	--listbox-border-focus: var( --accent-background-focus );
+}
+
+.x4listbox {
+	@extend .vbox;
+
+	margin: 5px;
+	border: 1px solid var( --listbox-border );
+
+	&:focus-within {
+		border-color: var( --listbox-border-focus );
+	}
+
+	outline: none;
+
+	&>.x4header {
+		border-bottom: 1px solid var( --color-gray-3 );
+	}
+
+	&>.body {
+		width: 100%;
+		flex-basis: 0;
+		overflow-y: auto;
+		overflow-x: auto;
+		outline: none;
+
+		.x4viewport {
+			display: table;
+			
+			.x4item {
+				@extend .flex;
+				
+				padding: 4px;
+				background-color: transparent;
+				color: var( --color-gray-9 );
+
+				&> .x4label {
+					color: inherit;
+					padding: 2px 6px;
+				}
+
+				&:hover {
+					background-color: var( --listbox-item-background-hover );
+				}
+
+				&.selected {
+					background-color: var( --listbox-item-background-sel );
+					color: var( --listbox-item-color-sel );
+				}
+
+				&:active{
+					//background-color: var( --color-80 );
+					//color: var(--color-0);
+				}	
+			}
+		}
+	}
+
+	&[disabled] {
+		cursor: not-allowed;
+		border-color: var( --border );
+		color: var( --listbox-item-color-disabled );
+
+		&>.body {
+			.x4viewport {
+				pointer-events: none;
+				.x4item {
+					&.selected {
+						background-color: var( --listbox-item-color-sel-disabled );
+					}
+				}
+			}
+		}
+	}
+}

package/lib/src/components/listbox/listbox.ts

@@ -0,0 +1,427 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file listbox.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, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '@core/component';
+
+import { ScrollView, Viewport } from '../viewport/viewport';
+import { HBox } from '../boxes/boxes.js';
+import { Label } from '../label/label.js';
+
+import "./listbox.module.scss"
+
+export enum kbNav {
+	first,
+	prev,
+	next,
+	last,
+}
+
+export type ListboxID = number | string;
+
+export interface ListItem {
+	id: ListboxID;
+	text: string;
+
+	iconId?: string;
+	data?: any;
+	cls?: string;
+	checked?: boolean;
+}
+
+/**
+ * 
+ */
+
+
+interface ListboxEvents extends ComponentEvents {
+	//change: EvChange;
+	click?: EvClick;
+	dblClick?: EvDblClick;
+	contextMenu?: EvContextMenu;
+	selectionChange?: EvSelectionChange;
+}
+
+/**
+ * 
+ */
+
+interface ListboxProps extends Omit<ComponentProps,'content'> {
+	items?: ListItem[];
+	renderer?: ( item: ListItem ) => Component;
+	//header?: Header;
+	checkable?: true,
+}
+
+
+
+export class Listbox extends Component<ListboxProps,ListboxEvents> {
+
+	private _view: Viewport;
+	private _selection: ListboxID;
+	private _selitem: Component;
+	private _items: ListItem[];
+
+	preventFocus = false;
+
+	constructor( props: ListboxProps ) {
+		super( { ...props } );
+
+		this.setAttribute( "tabindex", 0 );
+		
+		const scroller = new ScrollView( { cls: "body" } );
+		this._view = scroller.getViewport( );
+
+		this.setContent( [
+			//props.header ? props.header : null,
+			scroller,
+		] );
+		
+		this.setDOMEvents( {
+			click: 	 (ev) => this._on_click( ev ),
+			keydown: ( ev ) => this._on_key( ev ),
+			dblclick: (e) => this._on_click(e),
+			contextmenu: (e) => this._on_ctx_menu(e),
+		} );
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private _on_key( ev: KeyboardEvent ) {
+		if( this.isDisabled() ) {
+			return;
+		}
+
+		switch( ev.key ) {
+			case "ArrowDown": {
+				this.navigate( kbNav.next );
+				break;
+			}
+
+			case "ArrowUp": {
+				this.navigate( kbNav.prev );
+				break;
+			}
+
+			case "Home": {
+				this.navigate( kbNav.first );
+				break;
+			}
+
+			case "End": {
+				this.navigate( kbNav.last );
+				break;
+			}
+
+			default:
+				return;
+		}
+
+		ev.preventDefault( );
+		ev.stopPropagation( );
+	}
+
+	/**
+	 * 
+	 */
+
+	navigate( sens: kbNav ) {
+		
+		if( !this._selitem ) {
+			if( sens==kbNav.next )  sens = kbNav.first;
+			else sens = kbNav.last;
+		}
+
+		const next_visible = ( el: Component, down: boolean ) => {
+			
+			while( el && !el.isVisible() ) {
+				el = down ? el.nextElement() : el.prevElement();
+			}
+
+			return el;
+		}
+
+		if( sens==kbNav.first || sens==kbNav.last ) {
+			let fel = sens==kbNav.first ? this._view.firstChild() : this._view.lastChild( );
+			fel = next_visible( fel, sens==kbNav.first );
+
+			if( fel ) {
+				const id = fel.getData( "id" );
+				this._selectItem( id, fel );
+				return true;
+			}
+		}
+		else {
+			let nel = sens==kbNav.next ? this._selitem.nextElement() : this._selitem.prevElement();
+			nel = next_visible( nel, sens==kbNav.next );
+
+			if( nel ) {
+				const id = nel.getData( "id" );
+				this._selectItem( id, nel );
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * 
+	 */
+	
+	private _on_click( ev: UIEvent ) {
+		ev.stopImmediatePropagation();
+		ev.preventDefault( );
+
+		let target = ev.target as HTMLElement;
+		while( target && target!=this.dom ) {
+			const c = componentFromDOM( target );
+			if( c && c.hasClass("x4item") ) {
+				const id = c.getData( "id" );
+				const fev: ComponentEvent = { context:id };
+
+				if (ev.type == 'click') {
+					this.fire('click', fev );
+				}
+				else {
+					this.fire('dblClick', fev );
+				}
+
+				if (!fev.defaultPrevented) {
+					this._selectItem( id, c );
+				}
+				
+				return;
+			}
+
+			target = target.parentElement;
+		}
+
+		this.clearSelection( );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _on_ctx_menu(ev: MouseEvent) {
+
+		ev.preventDefault();		
+
+		let target = ev.target as HTMLElement;
+		while( target && target!=this.dom ) {
+			const c = componentFromDOM( target );
+			if( c && c.hasClass("x4item") ) {
+				const id = c.getData( "id" );
+				
+				this._selectItem(id, c);
+				this.fire('contextMenu', {uievent: ev, context: id } );
+			
+				return;
+			}
+
+			target = target.parentElement;
+		}
+
+		this.fire('contextMenu', { uievent:ev, context: null } );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _selectItem( id: ListboxID, item: Component ) {
+		if( this._selitem ) {
+			this._selitem.removeClass( "selected" );
+			this._selitem = undefined;
+		}
+
+		this._selitem = item;
+		this._selection = id;
+
+		if( item ) {
+			item.addClass( "selected" );
+			item.scrollIntoView( {
+				behavior: "smooth",
+				block: "nearest"
+			} );
+		}
+
+		const itm = this._findItem( id );
+		this.fire( "selectionChange", { selection: itm } );
+	}
+
+	/**
+	 * 
+	 */
+
+	private _findItem( id: ListboxID ) {
+		return this._items.find( x => x.id==id );
+	}
+
+	/**
+	 * 
+	 */
+	
+	private _findItemIndex( id: ListboxID ) {
+		return this._items.findIndex( x => x.id==id );
+	}
+
+	/**
+	 * 
+	 */
+
+	clearSelection( ) {
+		if( this._selitem ) {
+			this._selitem.removeClass( "selected" );
+			this._selitem = undefined;
+		}
+
+		this._selection = undefined;
+		this.fire( "selectionChange", { selection: undefined } );
+	}
+	
+	/**
+	 * 
+	 */
+
+	setItems( items: ListItem[] ) {
+		this.clearSelection( );
+		
+		this._view.clearContent( );
+		this._items = items;
+
+		if( items ) {
+			const content = items.map( x => this.renderItem(x) );
+			this._view.setContent( content );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	renderItem( item: ListItem ) {
+		const renderer = this.props.renderer ?? this.defaultRenderer;
+		const line = renderer( item );
+	
+		line.addClass( "x4item" );
+		line.setData( "id", item.id+"" );
+		
+		return line;
+	}
+
+	/**
+	 * 
+	 */
+
+	defaultRenderer( item: ListItem ): Component {
+		return new HBox( {
+			cls: item.cls,
+			content: new Label( { icon: item.iconId, text: item.text }) 
+		} )
+	}
+
+	/**
+	 * 
+	 */
+
+	filter( filter: string ) {
+		const childs = this._view.enumChildComponents( false );
+		
+		if( !filter ) {
+			childs.forEach( x => x.show( true ) );
+		}
+		else {
+			// get list of visible items
+			const filtred = this._items
+					.filter( x => x.text.includes(filter) )
+					.map( x => x.id+'' );
+
+			// now hide all elements not in list
+			childs.forEach( x => {
+				x.show( filtred.includes( x.getData( "id" ) ) );
+			});
+		}
+	}
+
+	/**
+	 * append or prepend a new item
+	 * @param item 
+	 * @param prepend 
+	 * @param select 
+	 */
+
+	appendItem( item: ListItem, prepend = false, select = true ) {
+		
+		if( select ) {
+			this.clearSelection( );
+		}
+
+		let el = this.renderItem( item );
+
+		if( prepend ) {
+			this._items.unshift( item );
+			this._view.prependContent( el );
+		}
+		else {
+			this._items.push( item );
+			this._view.appendContent( el );
+		}
+
+		if( select ) {
+			this._selectItem( item.id, el );
+		}
+	}
+
+	/**
+	 * update an item
+	 */
+
+	 updateItem( id: any, item: ListItem ) {
+
+		// find item
+		const idx = this._findItemIndex( id );
+		if( idx<0 ) {
+			return;
+		}
+		
+		// take care of selection
+		let was_sel = false;
+		if( this._selection && this._selection===id ) {
+			was_sel = true;
+		}
+
+		// replace it in the list
+		this._items[idx] = item;
+
+		// rebuild & replace it's line
+		const oldDOM = this.query( `[data-id="${item.id}"]` )?.dom;
+		if( oldDOM ) {
+			const _new = this.renderItem( item );
+			this._view.dom.replaceChild( _new.dom, oldDOM );
+
+			if( was_sel ) {
+				this._selectItem( item.id, _new );
+			}
+		}
+	}
+}

package/lib/src/components/menu/caret-right-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>

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

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