x4js 2.0.20 → 2.0.22

package/src/components/tabs/tabs.module.scss

@@ -30,9 +30,9 @@
 				border-bottom-color: var( --tab-border-hover );	
 			}
 
-			&:focus {
+			//&:focus {
 				//color: var( --color-60 );
-			}
+			//}
 		}
 
 	}

package/src/components/tabs/tabs.ts

@@ -32,6 +32,7 @@ export interface TabItem {
 	title: string;
 	icon?: string;
 	content: Component;
+	cls?: string;	// button class
 }
 
 /**
@@ -44,6 +45,10 @@ class CTab extends Button {
 		super( props );
 
 		this.addClass( "outline" );
+		if( item.cls ) {
+			this.addClass( item.cls );
+		}
+		
 		this.setIcon( item.icon );
 		this.setText( item.title );
 		this.setData( "tabname", item.name );
@@ -100,7 +105,6 @@ class CTabList extends HBox<TablistProps,TablistEvents> {
 		}
 	}
 
-
 	setItems( items: TabItem[ ] ) {
 		this.clearContent( );
 		items.forEach( tab => {
@@ -114,8 +118,11 @@ class CTabList extends HBox<TablistProps,TablistEvents> {
 		}, tab ) );
 	}
 
-	getTabCount( ) {
-		return this.dom.children.length;
+	removeItem( name: string ) {
+		const tab = this.query<Button>( `[data-tabname="${name}"]` );
+		if( tab ) {
+			this.removeChild( tab );
+		}
 	}
 }
 
@@ -197,9 +204,26 @@ export class Tabs extends VBox<TabsProps> {
 		this._list.addItem( item );
 		this._stack.addItem( { name: item.name, content: item.content } );
 
-		if( this._list.getTabCount( )==1 ) {
+		if( this._stack.getPageCount( )==1 ) {
 			this.selectTab( item.name );
 		}
 	}
+
+	/**
+	 * 
+	 */
+
+	removeTab( name: string ) {
+		this._list.removeItem( name );
+		this._stack.removeItem( name );
+	}
+
+	/**
+	 * 
+	 */
+
+	enumTabs( ): string[] {
+		return this._stack.enumPageNames( );
+	}
 }
 

package/src/components/textedit/textedit.ts

@@ -41,7 +41,7 @@ interface TextEditBase {
 	inputAttrs?: any;
 }
 
-type TextEditProps = TextEditInputs & TextEditBase;
+export type TextEditProps = TextEditInputs & TextEditBase;
 
 /*
 not enougth precise

package/src/components/treeview/treeview.module.scss

@@ -161,7 +161,15 @@
 					#icon {
 						color: var( --button-icon-color );
 					}
-				}	
+				}
+				
+				&:focus {
+					background-color: var( --ol-button-background-hover );
+				}
+
+				&:disabled {
+					color: var( --disabled-color-dark );
+				}
 			}
 		}
 	}

package/src/components/treeview/treeview.ts

@@ -15,11 +15,12 @@
  **/
 
 import { class_ns } from '../../core/core_tools';
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvSelectionChange, componentFromDOM } from '../../core/component';
+import { EventCallback } from '../../core/core_events';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 
 import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label } from '../label/label';
-import { ListboxID, ListItem, kbNav } from '../listbox/listbox';
+import { ListboxID, ListItem } from '../listbox/listbox';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
 import { Icon } from '../icon/icon';
 
@@ -52,14 +53,15 @@ export interface TreeItem extends ListItem {
 interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	items: TreeItem[];
 	footer?: Component;
-}
-
-interface ChangeEvent extends ComponentEvent {
-	selection: TreeItem;
+	selectionChange?: EventCallback<EvSelectionChange>;
+	dblClick?: EventCallback<EvDblClick>;
+	click?: EventCallback<EvClick>;
 }
 
 interface TreeviewEvents extends ComponentEvents {
 	selectionChange?: EvSelectionChange;
+	dblClick?: EvDblClick;
+	click?: EvClick;
 }
 
 /**
@@ -85,7 +87,11 @@ class CTreeViewItem extends Box {
 				new Label( { tag: "span", cls: "", text: item.text, icon: item.iconId } ),
 			]});
 
-			this._label.setData( "id", item.id+"" );
+			if( item.cls ) {
+				this._label.addClass( item.cls );
+			}
+
+			this._label.setInternalData( "id", item.id );
 				
 			if( item.children ) {
 				this. _childs = new VBox( { cls: "body" } );
@@ -159,6 +165,8 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	constructor( props: TreeviewProps ) {
 		super( props );
 
+		this.mapPropEvents( props, "selectionChange", "dblClick", "click" );
+
 		const scroller = new ScrollView( { cls: "body" } );
 		this._view = scroller.getViewport( );
 
@@ -173,7 +181,8 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 
 		this.setAttribute( "tabindex", 0 );
 		this.setDOMEvents( {
-			click: ( ev ) => this._onclick( ev ),
+			click: ( ev ) => this._on_click( ev ),
+			dblclick: (e) => this._on_click(e),
 			keydown: ( ev ) => this._onkey( ev ),
 		});
 
@@ -199,14 +208,27 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 	}
 
-	private _onclick( ev: UIEvent ) {
+	private _on_click( ev: UIEvent ) {
 		let target = ev.target as HTMLElement;
+		
 		while( target && target!=this.dom ) {
 			const c = componentFromDOM( target );
 			
 			if( c && c.hasClass("item") ) {
-				const id = c.getData( "id" );
-				this._selectItem( id, c );
+				const id = c.getInternalData( "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;
 			}
 
@@ -413,7 +435,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 
 		const itm = this._findItem( id );
-		this.fire( "selectionChange", { selection: itm, empty: false } );
+		this.fire( "selectionChange", { selection: [itm], empty: false } );
 	}
 
 	private _findItem( id: ListboxID ) {
@@ -432,7 +454,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 
 		this._selection = undefined;
-		this.fire( "selectionChange", { selection: undefined, empty: true } );
+		this.fire( "selectionChange", { selection: [], empty: true } );
 	}
 
 	/**
@@ -442,4 +464,21 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	getSelection( ) {
 		return this._selection;
 	}
+
+	/**
+	 * 
+	 */
+
+	selectItem( id: ListboxID ) {
+		const itm = this._findItem( id );
+		if( itm ) {
+			this.visitChildren( ( c ) => {
+				const cid = c.getInternalData( "id" );
+				if( cid == id ) {
+					this._selectItem( id, c );
+					return true;
+				}
+			} );
+		}
+	}
 }

package/src/core/component.ts

@@ -19,6 +19,7 @@ import { CoreElement } from './core_element';
 import { ariaValues, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
 import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom';
+import { Application, EvMessage } from './core_application';
 
 interface RefType<T extends Component> {
 	dom: T;
@@ -92,8 +93,8 @@ export interface ComponentProps {
 	// shortcuts
 	width?: string | number;
 	height?: string | number;
-	disabled?: true,
-	hidden?: true,
+	disabled?: boolean,
+	hidden?: boolean,
 	flex?: boolean | number;
 
 	tooltip?: string;
@@ -106,7 +107,7 @@ export interface ComponentProps {
 	//	because all memebers here are optional.
 	//	this allow TS to recongnize derived props as ComponentProps
 	//[key: string]: any; 
-};
+}
 
 
 /**
@@ -219,6 +220,16 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	}
 
 
+	onGlobalEvent( cb: ( ev: EvMessage ) => void ) {
+		
+		const off = Application.instance().on( "global", ev => {
+			cb( ev );
+		})
+
+		this.addDOMEvent( "removed", ( ) => off.off() );
+	}
+
+
 	// :: CLASSES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	/**
@@ -328,7 +339,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 	
 	setAttribute( name: string, value: string | number | boolean ) {
-		if( value===null || value===undefined ) {
+		if( value===null || value===undefined || value===false ) {
 			this.dom.removeAttribute( name );
 		}
 		else {
@@ -385,8 +396,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return this;
 	}
 
-	getInternalData( name: string|symbol ): any {
-		return this.#store?.get(name);
+	getInternalData<T = any>( name: string|symbol ): T {
+		return this.#store?.get(name) as T;
 	}
 
 	
@@ -868,6 +879,33 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return children;
 	}
 
+	/**
+	 * 
+	 */
+
+	visitChildren( cb: ( el: Component ) => boolean ) {
+
+		const visit = ( p: Element ) => {
+			for( let d=p.firstElementChild; d; d=d.nextElementSibling ) {
+				const comp = componentFromDOM( d as Element );
+				if( comp ) {
+					if( cb( comp ) ) {
+						return true;
+					}
+				}
+
+				// avoid visit of svg elements
+				if( d.firstElementChild && d.tagName!="svg" && d.tagName!="SVG" ) {
+					if( visit( d ) ) {
+						return true;
+					}
+				}
+			}
+		}
+
+		visit( this.dom );
+	}
+
 	/**
 	 * 
 	 */
@@ -1022,11 +1060,10 @@ export interface EvFocus extends ComponentEvent {
  * value is the new selection or null
  */
 
-interface ISelection {
-}
+type ISelection = number | string | any;
 
 export interface EvSelectionChange extends ComponentEvent {
-	readonly selection: ISelection;
+	readonly selection: ISelection[];
 	readonly empty: boolean;
 }
 

package/src/core/core_data.ts

@@ -889,31 +889,31 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 					filterValue = filterValue.toUpperCase( );
 				}
 				
-				function _lt( recval: string ) : boolean {
+				const _lt = ( recval: string ) : boolean => {
 					return recval < filterValue;
 				}
 
-				function _le( recval: string ) : boolean {
+				const _le = ( recval: string ) : boolean => {
 					return recval <= filterValue;
 				}
 
-				function _eq( recval: string ) : boolean {
+				const _eq = ( recval: string ) : boolean => {
 					return recval == filterValue;
 				}
 
-				function _neq( recval: string ) : boolean {
+				const _neq = ( recval: string ) : boolean => {
 					return recval != filterValue;
 				}
 
-				function _ge( recval: string ) : boolean {
+				const _ge = ( recval: string ) : boolean => {
 					return recval >= filterValue;
 				}
 
-				function _gt( recval: string ) : boolean {
+				const _gt = ( recval: string ) : boolean => {
 					return recval > filterValue;
 				}
 
-				function _re( recval: string ) : boolean {
+				const _re = ( recval: string ) : boolean => {
 					filterRe.lastIndex = -1;
 					return filterRe.test( recval );
 				}
@@ -959,7 +959,7 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 					let keep  = filterFn( field );
 					if( keep ) {
 						index[iidx++] = idx;
-					};
+					}
 				});
 			}
 		}

package/src/core/core_state.ts

@@ -57,6 +57,6 @@ export class StateManager {
 		current[parts[parts.length - 1]] = value;
 
 		// Notify subscribers
-		this._notifySubscribers(path, value);
+		//this._notifySubscribers(path, value);
 	}
 }

package/src/core/core_tools.ts

@@ -902,5 +902,7 @@ export enum kbNav {
 	pgup,
 	next,
 	last,
+	left,
+	right,
 }
 

package/lib/src/components/base.scss

@@ -1,25 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file base.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";
-
-.x4box {
-	@extend .box;
-}
-
-.x4flex {
-	@extend .flex;
-}

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

@@ -1,54 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file boxes.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";
-
-.x4hbox {
-	@extend .hbox;
-	&.align-start {
-		align-items: start;
-	}
-}
-
-.x4vbox {
-	@extend .vbox;
-}
-
-.x4stackbox {
-	display: flex;
-	
-	&>* {
-		@extend .fit;
-		position: relative !important;
-	}
-
-	&>*:not(.selected) {
-		display: none;
-	}
-}
-
-.x4gridbox {
-	display: grid;
-}
-
-.x4masonrybox {
-	display: grid;
-	grid-gap: 10px;
-	grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
-	grid-auto-rows: 10px;
-
-	overflow: hidden;
-}