x4js 2.0.18 → 2.0.21

package/src/components/treeview/treeview.ts

@@ -14,12 +14,13 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools';
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvSelectionChange, componentFromDOM } from '../../core/component';
+import { class_ns } from '../../core/core_tools';
+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/components/viewport/viewport.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '@core/core_tools.js';
+import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from "../../core/component"
 
 import "./viewport.module.scss"

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_application.ts

@@ -14,10 +14,10 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, componentFromDOM } from './component.js';
-import { CoreElement } from './core_element.js';
+import { Component, componentFromDOM } from './component';
+import { CoreElement } from './core_element';
 import { CoreEvent, EventMap } from './core_events';
-import { getFocusableElements, ITabHandler } from './core_tools.js';
+import { getFocusableElements, ITabHandler } from './core_tools';
 
 const socket_sent = Symbol( 'socket' );
 

package/src/core/core_data.ts

@@ -15,10 +15,10 @@
  **/
 
 
-import { EvChange } from '@core/component.js';
-import { CoreElement } from '@core/core_element.js';
-import { CoreEvent, EventCallback, EventMap, EventSource } from '@core/core_events.js';
-import { isArray, isString } from '@core/core_tools.js';
+import { EvChange } from './component';
+import { CoreElement } from './core_element';
+import { CoreEvent, EventCallback, EventMap, EventSource } from './core_events';
+import { isArray, isString } from './core_tools';
 
 export type DataRecordID = any;
 export type DataFieldValue = string | Date | number | boolean;
@@ -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_element.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EventMap, EventSource } from './core_events.js';
+import { EventMap, EventSource } from './core_events';
 
 /**
  * 

package/src/core/core_react.ts

@@ -34,8 +34,8 @@
  * 
  */
 
-import { Component } from './component.js';
-import { Constructor, isString } from './core_tools.js';
+import { Component } from './component';
+import { Constructor, isString } from './core_tools';
 
 
 /**

package/src/core/core_router.ts

@@ -14,8 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { EvChange, EvError } from './component.js';
-import { EventMap, EventSource } from './core_events.js';
+import { EvChange, EvError } from './component';
+import { EventMap, EventSource } from './core_events';
 
 type RouteHandler = ( params: any, path: string ) => void;
 

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_styles.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isString } from './core_tools.js';
+import { isString } from './core_tools';
 
 export const unitless: Record<string,1> = {
 	animationIterationCount: 1,

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;
-}