x4js 2.0.13 → 2.0.15

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

@@ -15,26 +15,20 @@
  **/
 
 import { Component, ComponentEvent, ComponentEvents, componentFromDOM, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange } from '../../core/component';
+import { EventCallback } from '../../core/core_events.js';
+import { kbNav, class_ns, isArray, UnsafeHtml } from '@core/core_tools.js';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { HBox } from '../boxes/boxes.js';
 import { Label } from '../label/label.js';
 
 import "./listbox.module.scss"
-import { class_ns } from '@core/core_tools.js';
-
-export enum kbNav {
-	first,
-	prev,
-	next,
-	last,
-}
 
 export type ListboxID = number | string;
 
 export interface ListItem {
 	id: ListboxID;
-	text: string;
+	text: string | UnsafeHtml;
 
 	iconId?: string;
 	data?: any;
@@ -46,7 +40,6 @@ export interface ListItem {
  * 
  */
 
-
 interface ListboxEvents extends ComponentEvents {
 	//change: EvChange;
 	click?: EvClick;
@@ -63,7 +56,13 @@ interface ListboxProps extends Omit<ComponentProps,'content'> {
 	items?: ListItem[];
 	renderer?: ( item: ListItem ) => Component;
 	//header?: Header;
+	footer?: Component,
 	checkable?: true,
+	multisel?: true,
+
+	dblClick?: EventCallback<EvDblClick>;
+	selectionChange?: EventCallback<EvSelectionChange>;
+	contextMenu?: EventCallback<EvContextMenu>;
 }
 
 /**
@@ -74,8 +73,12 @@ interface ListboxProps extends Omit<ComponentProps,'content'> {
 export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 	private _view: Viewport;
-	private _selection: ListboxID;
-	private _selitem: Component;
+	//private _selection: ListboxID;
+	//private _selitem: Component;
+	
+	private _lastsel: ListboxID;
+	
+	private _multisel: Set<ListboxID>;
 	private _items: ListItem[];
 
 	preventFocus = false;
@@ -84,13 +87,21 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		super( { ...props } );
 
 		this.setAttribute( "tabindex", 0 );
+		this.mapPropEvents( props, "dblClick", "selectionChange", "contextMenu" );
 		
 		const scroller = new ScrollView( { cls: "body" } );
 		this._view = scroller.getViewport( );
+		this._multisel = new Set( );
+		this._items = [];
+
+		if( props.footer ) {
+			props.footer.setAttribute( "id", "footer" );
+		}
 
 		this.setContent( [
 			//props.header ? props.header : null,
 			scroller,
+			props.footer,
 		] );
 		
 		this.setDOMEvents( {
@@ -149,7 +160,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 	navigate( sens: kbNav ) {
 		
-		if( !this._selitem ) {
+		if( !this._lastsel ) {
 			if( sens==kbNav.next )  sens = kbNav.first;
 			else sens = kbNav.last;
 		}
@@ -168,18 +179,19 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 			fel = next_visible( fel, sens==kbNav.first );
 
 			if( fel ) {
-				const id = fel.getData( "id" );
-				this._selectItem( id, fel );
+				const id = fel.getInternalData( "id" );
+				this._selectItem( id, fel, 'single' );
 				return true;
 			}
 		}
 		else {
-			let nel = sens==kbNav.next ? this._selitem.nextElement() : this._selitem.prevElement();
+			const selitem = this._itemWithID( this._lastsel );
+			let nel = sens==kbNav.next ? selitem.nextElement() : selitem.prevElement();
 			nel = next_visible( nel, sens==kbNav.next );
 
 			if( nel ) {
-				const id = nel.getData( "id" );
-				this._selectItem( id, nel );
+				const id = nel.getInternalData( "id" );
+				this._selectItem( id, nel, 'single' );
 				return true;
 			}
 		}
@@ -190,18 +202,31 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	/**
 	 * 
 	 */
-	
-	private _on_click( ev: UIEvent ) {
-		ev.stopImmediatePropagation();
-		ev.preventDefault( );
 
+	private _itemWithID( id: ListboxID ) {
+		//const itm = this.query( `[data-id="${id}"]` );
+		const all = this._view.enumChildComponents( false );
+		return all.find( x => x.getInternalData("id")===id )
+	}
+
+	/**
+	 * 
+	 */
+	
+	private _on_click( ev: MouseEvent ) {
 		let target = ev.target as HTMLElement;
+
 		while( target && target!=this.dom ) {
 			const c = componentFromDOM( target );
+
+			// avoid trapping child ckick
+			if( c.dom.tagName==='INPUT' ) {
+				return;
+			}
+
 			if( c && c.hasClass("x4item") ) {
-				const id = c.getData( "id" );
+				const id = c.getInternalData( "id" );
 				const fev: ComponentEvent = { context:id };
-
 				if (ev.type == 'click') {
 					this.fire('click', fev );
 				}
@@ -210,7 +235,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 				}
 
 				if (!fev.defaultPrevented) {
-					this._selectItem( id, c );
+					this._selectItem( id, c, ev.ctrlKey ? 'toggle' : 'single' );
 				}
 				
 				return;
@@ -220,6 +245,9 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 
 		this.clearSelection( );
+
+		ev.stopImmediatePropagation();
+		ev.preventDefault( );
 	}
 
 	/**
@@ -234,9 +262,9 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		while( target && target!=this.dom ) {
 			const c = componentFromDOM( target );
 			if( c && c.hasClass("x4item") ) {
-				const id = c.getData( "id" );
+				const id = c.getInternalData( "id" );
 				
-				this._selectItem(id, c);
+				this._selectItem(id, c, 'single' );
 				this.fire('contextMenu', {uievent: ev, context: id } );
 			
 				return;
@@ -252,35 +280,91 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	 * 
 	 */
 
-	private _selectItem( id: ListboxID, item: Component ) {
-		if( this._selitem ) {
-			this._selitem.removeClass( "selected" );
-			this._selitem = undefined;
+	private _selectItem( id: ListboxID, item: Component, mode: "single" | "toggle" ) {
+		
+		if( !this.props.multisel ) {
+			mode = 'single';
 		}
 
-		this._selitem = item;
-		this._selection = id;
+		this._lastsel = id;
+
+		if( mode=='single' ) {
+			if( this._multisel.has(id) ) {
+				return;
+			}
 
+			this._clearSelection( );
+			if( item ) {
+				this._multisel.add( id );
+				item.addClass( "selected" );
+			}
+		}
+		else {	// toggle
+			if( item ) {
+				if( this._multisel.has(id) ) {
+					item.removeClass( "selected" );
+					this._multisel.delete( id );
+				}
+				else {
+					this._multisel.add( id );
+					item.addClass( "selected" );
+				}
+			}
+		}
+		
 		if( item ) {
-			item.addClass( "selected" );
 			item.scrollIntoView( {
 				behavior: "smooth",
 				block: "nearest"
 			} );
 		}
 
-		const itm = this._findItem( id );
-		this.fire( "selectionChange", { selection: itm } );
+		this.fire( "selectionChange", { selection: this.getSelection(), empty: this._multisel.size==0 } );
 	}
 
 	/**
 	 * 
 	 */
 
-	private _findItem( id: ListboxID ) {
-		return this._items.find( x => x.id==id );
+	getItem( id: ListboxID ): ListItem {
+		return this._items.find( x => x.id===id );
 	}
 
+	/**
+	 * select an item by it's id
+	 */
+
+	select( ids: ListboxID | ListboxID[], notify = true ) {
+
+		if( !isArray(ids) ) {
+			ids = [ids];
+		}
+
+		if( !ids.length ) {
+			if( this._multisel.size ) {
+				this.clearSelection( );
+			}
+
+			return;
+		}
+
+		// if one of new selection not in old selection...
+		if( ids.some( x => !this._multisel.has(x)) ) {
+			this._clearSelection( );
+			const all = this._view.enumChildComponents( false );
+
+			ids.forEach( id => {
+				const itm = all.find( x => x.getInternalData("id")===id );	//this.query( `[data-id="${id}"]` );
+				if( itm ) {
+					this._multisel.add( id );
+					itm.addClass( "selected" );
+				}
+			});
+
+			this.fire( "selectionChange", { selection: this.getSelection(), empty: this._multisel.size==0 } );
+		}
+	}
+	
 	/**
 	 * 
 	 */
@@ -293,29 +377,49 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	 * 
 	 */
 
-	clearSelection( ) {
-		if( this._selitem ) {
-			this._selitem.removeClass( "selected" );
-			this._selitem = undefined;
+	private _clearSelection( ) {
+
+		const all = this._view.enumChildComponents( false );
+
+		if( this._multisel.size ) {
+			const ids = Array.from( this._multisel );
+			ids.forEach( id => {
+				const itm = all.find( x => x.getInternalData("id")===id );	//this.query( `[data-id="${id}"]` );
+				if( itm ) {
+					itm.removeClass( "selected" );	
+				}
+			} );
 		}
+		
+		this._multisel.clear( );
+	}
 
-		this._selection = undefined;
-		this.fire( "selectionChange", { selection: undefined } );
+	clearSelection( ) {
+		if( this._multisel.size ) {
+			this._clearSelection( );
+			this.fire( "selectionChange", { selection: [], empty: true } );
+		}
 	}
 	
 	/**
 	 * 
 	 */
 
-	setItems( items: ListItem[] ) {
+	setItems( items: ListItem[], keepSel = false ) {
+
+		const oldSel = this.getSelection( );
+
 		this.clearSelection( );
-		
 		this._view.clearContent( );
 		this._items = items;
 
 		if( items ) {
 			const content = items.map( x => this.renderItem(x) );
 			this._view.setContent( content );
+
+			if( keepSel ) {
+				this.select( oldSel );
+			}
 		}
 	}
 
@@ -328,7 +432,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		const line = renderer( item );
 	
 		line.addClass( "x4item" );
-		line.setData( "id", item.id+"" );
+		line.setInternalData( "id", item.id );
 		
 		return line;
 	}
@@ -362,7 +466,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 			// now hide all elements not in list
 			childs.forEach( x => {
-				x.show( filtred.includes( x.getData( "id" ) ) );
+				x.show( filtred.includes( x.getInternalData( "id" ) ) );
 			});
 		}
 	}
@@ -377,7 +481,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 	appendItem( item: ListItem, prepend = false, select = true ) {
 		
 		if( select ) {
-			this.clearSelection( );
+			this._clearSelection( );
 		}
 
 		let el = this.renderItem( item );
@@ -392,7 +496,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		}
 
 		if( select ) {
-			this._selectItem( item.id, el );
+			this._selectItem( item.id, el, 'single' );
 		}
 	}
 
@@ -410,7 +514,7 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		
 		// take care of selection
 		let was_sel = false;
-		if( this._selection && this._selection===id ) {
+		if( this._multisel.has(id) ) {
 			was_sel = true;
 		}
 
@@ -418,14 +522,18 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		this._items[idx] = item;
 
 		// rebuild & replace it's line
-		const oldDOM = this.query( `[data-id="${item.id}"]` )?.dom;
-		if( oldDOM ) {
+		const old = this._itemWithID( item.id );
+		if( old?.dom ) {
 			const _new = this.renderItem( item );
-			this._view.dom.replaceChild( _new.dom, oldDOM );
-
 			if( was_sel ) {
-				this._selectItem( item.id, _new );
+				_new.addClass( "selected" );
 			}
+
+			this._view.dom.replaceChild( _new.dom, old.dom );
 		}
 	}
+
+	getSelection( ) {
+		return Array.from( this._multisel );
+	}
 }

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

@@ -31,7 +31,7 @@
 	@extend .shadow-lg;
 
 	position: absolute;
-	overflow-y: scroll;
+	overflow-y: auto;
 
 	border-radius: var(--bradius);
 	padding: 8px 0;
@@ -58,6 +58,15 @@
 		#icon {
 			width: 16px;
 			height: 16px;
+			
+			.fa-primary {
+				fill: var( --color-primary-a50 );
+			}
+
+			.fa-secondary {
+				fill: var( --color-primary-a30 );
+				opacity: 1;
+			}
 		}
 
 		#text {

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

@@ -38,7 +38,7 @@ export interface MenuItem {
 	click?: DOMEventHandler;
 }
 
-type MenuElement = MenuItem | Component | string;
+export type MenuElement = MenuItem | Component | string;
 
 export interface MenuProps extends Omit<PopupProps,"content"> {
 	items: MenuElement[];
@@ -90,7 +90,10 @@ class CMenuItem extends Component {
 			this.menu.on( "closed", ( ) => this.removeClass( "opened" ) );
 		}
 		else {
-			this.addDOMEvent( "mouseenter", ( ) => { openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); } );
+			this.addDOMEvent( "mouseenter", ( ) => { 
+				openTimer.setTimeout( "open", OPEN_DELAY, ( ) => {this.dismiss(true)}); 
+			} );
+
 			this.addDOMEvent( "click", ( ) => {
 				this.dismiss( false );
 				if( itm.click ) {
@@ -146,7 +149,7 @@ class CMenuItem extends Component {
 export class Menu extends Popup {
 	
 	constructor( props: MenuProps ) {
-		super( { ...props, autoClose: "menu", modal: false } );
+		super( { ...props, autoClose: "menu" } );
 
 		this.addClass( "x4vbox" );
 

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

@@ -23,6 +23,7 @@
 }
 
 .x4messagebox {
+	max-width: 60vw;
 
 	& > .caption {
 		background-color: var( --msgbox-caption-background );
@@ -41,8 +42,51 @@
 
 		.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 );
+		}
+	}
+
+
+}