x4js 2.0.2 → 2.0.3

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

@@ -1,103 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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/src/components/listbox/listbox.ts

@@ -1,427 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @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/src/components/menu/caret-right-solid.svg

@@ -1 +0,0 @@
-<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/src/components/menu/menu.module.scss

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