x4js 2.0.13 → 2.0.14

package/lib/src/components/treeview/treeview.ts

@@ -14,16 +14,18 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, componentFromDOM } from '../../core/component';
+import { class_ns } from '@core/core_tools';
+import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvSelectionChange, componentFromDOM } from '../../core/component';
 
+import { ScrollView, Viewport } from '../viewport/viewport';
 import { Label } from '../label/label';
 import { ListboxID, ListItem, kbNav } from '../listbox/listbox';
 import { Box, BoxProps, HBox, VBox } from '../boxes/boxes';
-import { Icon } from '../icon/icon.js';
+import { Icon } from '../icon/icon';
 
 import "./treeview.module.scss";
 import folder_icon from "./chevron-down-light.svg"
-import { class_ns } from '@core/core_tools.js';
+
 
 //import folder_closed from "./folder-minus-light.svg"
 
@@ -49,6 +51,7 @@ export interface TreeItem extends ListItem {
 
 interface TreeviewProps extends Omit<ComponentProps,"content"> {
 	items: TreeItem[];
+	footer?: Component;
 }
 
 interface ChangeEvent extends ComponentEvent {
@@ -56,7 +59,7 @@ interface ChangeEvent extends ComponentEvent {
 }
 
 interface TreeviewEvents extends ComponentEvents {
-	change: ChangeEvent;
+	selectionChange?: EvSelectionChange;
 }
 
 /**
@@ -78,8 +81,8 @@ class CTreeViewItem extends Box {
 
 		if( item ) {
 			this._label = new HBox( {cls:"label item", content: [
-				this._icon = new Icon( { iconId: item.children? folder_icon : item.iconId } ),
-				new Label( { tag: "span", cls: "", text: item.text } ),
+				this._icon = new Icon( { iconId: item.children ? folder_icon : undefined } ),
+				new Label( { tag: "span", cls: "", text: item.text, icon: item.iconId } ),
 			]});
 
 			this._label.setData( "id", item.id+"" );
@@ -136,12 +139,19 @@ class CTreeViewItem extends Box {
 	}
 }
 
+
+// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+
+
 /**
  * 
  */
 
 @class_ns( "x4" )
 export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
+
+	private _view: Viewport;
 	private _selection: ListboxID;
 	private _selitem: Component;
 	private _items: TreeItem[];
@@ -149,8 +159,16 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	constructor( props: TreeviewProps ) {
 		super( props );
 
-		if( props.items ) {
-			this.setItems( props.items );
+		const scroller = new ScrollView( { cls: "body" } );
+		this._view = scroller.getViewport( );
+
+		this.setContent( [
+			scroller,
+			props.footer,
+		] );
+
+		if( props.footer ) {
+			props.footer.setAttribute( "id", "footer" );
 		}
 
 		this.setAttribute( "tabindex", 0 );
@@ -158,6 +176,10 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			click: ( ev ) => this._onclick( ev ),
 			keydown: ( ev ) => this._onkey( ev ),
 		});
+
+		if( props.items ) {
+			this.setItems( props.items );
+		}
 	}
 
 	/**
@@ -165,11 +187,16 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 	 */
 
 	setItems( items: TreeItem[ ] ) {
+		this.clearSelection( );
+		this._view.clearContent( );
 		this._items = items;
 
 		const root = new CTreeViewItem( { cls: "root"}, null );
-		root.setItems( items );
-		this.setContent( root );
+
+		if( items ) {
+			root.setItems( items );
+			this._view.setContent( root );
+		}
 	}
 
 	private _onclick( ev: UIEvent ) {
@@ -386,7 +413,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 
 		const itm = this._findItem( id );
-		this.fire( "change", { selection: itm } );
+		this.fire( "selectionChange", { selection: itm, empty: false } );
 	}
 
 	private _findItem( id: ListboxID ) {
@@ -405,6 +432,14 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 		}
 
 		this._selection = undefined;
-		this.fire( "change", { selection: undefined } );
+		this.fire( "selectionChange", { selection: undefined, empty: true } );
+	}
+
+	/**
+	 * 
+	 */
+
+	getSelection( ) {
+		return this._selection;
 	}
 }

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

@@ -18,6 +18,13 @@
 
 .x4scrollview {
 	@extend .flex;
+
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	left: 0;
+	top: 0;
+	overflow: auto;
 }
 
 .x4viewport {

package/lib/src/core/component.ts

@@ -14,7 +14,7 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym } from './core_tools';
+import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools';
 import { CoreElement } from './core_element';
 import { ariaValues, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
@@ -41,11 +41,15 @@ const RE_NUMBER = /^-?\d+(\.\d*)?$/;
  * to your class to avoid autogenerated css class names conflicts
  */
 
-function genClassNames( x: any ) {
+function genClassNames( x: any ): string[] {
 	
 	let classes = [];
 	let self = Object.getPrototypeOf(x);
 
+	if( self.constructor==Component ) {
+		return ["x4-comp"];
+	}
+
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
 		const clsns: string = self.constructor.hasOwnProperty(x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
@@ -60,7 +64,7 @@ function genClassNames( x: any ) {
  * 
  */
 
-export type ComponentContent = Component | string | UnsafeHtml | number | boolean | Component[];
+export type ComponentContent = Component | Component[] | string | string[] | UnsafeHtml| UnsafeHtml[] | number | boolean;
 
 let gen_id = 1000;
 
@@ -89,6 +93,7 @@ export interface ComponentProps {
 	height?: string | number;
 	disabled?: true,
 	hidden?: true,
+	flex?: boolean | number;
 
 	tooltip?: string;
 
@@ -129,7 +134,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	readonly props: P;
 	protected readonly clsprefix: string;	// internal class name prefix (x4 internal)
 
-	private store: Map<string|Symbol,any>;
+	#store: Map<string|Symbol,any>;
 
 	constructor( props: P ) {
 		super( );
@@ -159,6 +164,15 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				this.show( false );
 			}
 
+			if( props.flex===true ) {
+				this.addClass( "x4flex" );
+			}
+			else if( props.flex!==undefined ) {
+				this.setStyle( {
+					"flexGrow": props.flex+""
+				});
+			}
+
 			if( props.id!==undefined ) {
 				this.setAttribute( "id", props.id );
 			}
@@ -220,8 +234,9 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	addClass( cls: string ) {
 		if( !cls ) return;
-		
+				
 		if( cls.indexOf(' ')>=0 ) {
+			cls = cls.trim( );
 			const ccs = cls.split( " " );
 			this.dom.classList.add(...ccs);
 		}
@@ -231,11 +246,16 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	}
 
 	/**
-	 * 
+	 * special case: '*' mean clear class list
 	 */
 
 	removeClass( cls: string ) {
 		if( !cls ) return;
+
+		if( cls=='*' ) {
+			this.dom.classList.value = "";
+			return;
+		}
 		
 		if( cls.indexOf(' ')>=0 ) {
 			const ccs = cls.split( " " );
@@ -295,10 +315,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	setAttributes( attrs: ComponentAttributes ) {
-		
 		for( const name in attrs ) {
-			const value = attrs[name];
-			this.setAttribute( name, value );
+			this.setAttribute( name, attrs[name] );
 		}
 	}
 
@@ -331,6 +349,18 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return this.getAttribute( "data-"+name );
 	}
 
+	/**
+	 * @returns undefined if not a number
+	 */
+	getIntData( name: string ) : number {
+		const v = parseInt( this.getAttribute( "data-"+name ) );
+		if( Number.isFinite(v) ) {
+			return v;
+		}
+
+		return undefined;
+	}
+
 	/**
 	 * 
 	 */
@@ -344,16 +374,16 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	setInternalData( name: string|Symbol, value: any ): this {
-		if( !this.store ) {
-			this.store = new Map( );
+		if( !this.#store ) {
+			this.#store = new Map( );
 		}
 
-		this.store.set( name, value );
+		this.#store.set( name, value );
 		return this;
 	}
 
 	getInternalData( name: string|Symbol ): any {
-		return this.store?.get(name);
+		return this.#store?.get(name);
 	}
 
 	
@@ -387,7 +417,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	protected mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
 		const p = props as any;
 		elements.forEach( n => {
-			if (p.hasOwnProperty(n) ) {
+			if (p.hasOwnProperty(n) && p[n]) {
 				this.on( n, p[n] );
 			}
 		});
@@ -465,17 +495,15 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 
 	prependContent( content: ComponentContent ) {
 		const d = this.dom;
-
 		const set = ( c: Component | string | UnsafeHtml | number | boolean ) => {
 			if (c instanceof Component ) {
-				d.insertBefore( d.firstChild, c.dom );
+				d.insertAdjacentElement( 'afterbegin', c.dom );
 			}
 			else if( c instanceof UnsafeHtml) {
-				d.insertAdjacentHTML( 'beforebegin', c.toString() );
+				d.insertAdjacentHTML( 'afterbegin', c.toString() );
 			}
 			else if (typeof c === "string" || typeof c === "number") {
-				const tnode = document.createTextNode(c.toString());
-				d.insertBefore( d.firstChild, tnode );
+				d.insertAdjacentText( 'afterbegin', c.toString() );
 			}
 			else {
 				console.warn("Unknown type to append: ", c);
@@ -512,7 +540,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	queryAll( selector: string ): Component[] {
 		const all = this.dom.querySelectorAll( selector );
 		const rc = new Array( all.length );
-		all.forEach( (x,i) => rc[i]=componentFromDOM(x) );
+		all.forEach( (x,i) => rc[i]=wrapDOM(x as HTMLElement) );
 		return rc;
 	}
 
@@ -525,6 +553,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 		return componentFromDOM<T>(r);
 	}
 
+
 	// :: STYLES ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	
@@ -646,7 +675,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	getBoundingRect( ): Rect {
+	getBoundingRect( ): IRect {
 		const rc = this.dom.getBoundingClientRect( );
 		return new Rect( rc.x, rc.y, rc.width, rc.height );
 	}
@@ -657,8 +686,13 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	focus( ) {
+	focus( ): this {
 		(this.dom as HTMLElement).focus( );
+		return this;
+	}
+
+	hasFocus( ) {
+		return document.activeElement==this.dom;
 	}
 
 	/**
@@ -681,40 +715,49 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 * 
 	 */
 
-	show( vis = true ) {
+	show( vis = true ): this {
 		this.setClass( 'x4hidden', !vis );
+		return this;
 	}
 
 	/**
 	 * 
 	 */
 
-	hide( ) {
+	hide( ): this {
 		this.show( false );
+		return this;
 	}
 
 	/**
 	 * enable or disable a component (all sub HTMLElement will be also disabled)
 	 */
 
-	enable( ena = true ) {
-		this.setAttribute( "disabled", !ena );
+	enable( ena = true ): this {
+		this.setAttribute( "disabled", !ena ? 'true' : null );
+
+		if( this.dom instanceof HTMLInputElement || this.dom instanceof HTMLButtonElement ) {
+			this.dom.disabled = !ena;
+		}
 
 		// propagate diable state to all input children
 		const nodes = this.enumChildNodes( true );
 		nodes.forEach( x => {
-			if( x instanceof HTMLInputElement ) {
+			if( x instanceof HTMLInputElement || x instanceof HTMLButtonElement ) {
 				x.disabled = !ena;
 			}
 		});
+
+		return this;
 	}
 
 	/**
 	 * 
 	 */
 
-	disable( ) {
+	disable( ): this {
 		this.enable( false );
+		return this;
 	}
 
 	/**
@@ -749,10 +792,17 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	 */
 
 	parentElement<T extends Component>( cls?: Constructor<T> ): T {
-		let p = this.dom;
+		return Component.parentElement<T>( this.dom, cls );	
+	}
 
-		while( p.parentElement ) {
-			const cp = componentFromDOM( p.parentElement );
+	/**
+	 * search for parent that match the given contructor 
+	 */
+	
+	static parentElement<T extends Component>( dom: Node, cls?: Constructor<T> ): T {
+
+		while( dom.parentElement ) {
+			const cp = componentFromDOM( dom.parentElement );
 			if( !cls ) {
 				return cp as T;
 			}
@@ -761,7 +811,7 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 				return cp;
 			}
 
-			p = p.parentElement;
+			dom = dom.parentElement;
 		}
 
 		return null;
@@ -875,7 +925,11 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 	// :: SPECIALS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 	/**
+	 * system interfaces:
+	 * 	"form-element"
+	 * 	"tab-handler"
 	 * 
+	 * each app can create it's own interface
 	 */
 
 	queryInterface<T>( name: string ): T {
@@ -923,6 +977,13 @@ export class Flex extends Component {
 	}
 }
 
+// just a spacer element that push other
+export class Space extends Component {
+	constructor( width?: number|string, cls?: string ) {
+		super( { width, cls } )
+	}
+}
+
 
 // :: HIGH LEVEL BASIC EVENTS ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
@@ -945,6 +1006,14 @@ export interface EvChange extends ComponentEvent {
 	readonly value: any;
 }
 
+/**
+ * Focus event
+ */
+
+export interface EvFocus extends ComponentEvent {
+	readonly focus_out: boolean;
+}
+
 /**
  * Selection Event
  * value is the new selection or null
@@ -955,6 +1024,7 @@ interface ISelection {
 
 export interface EvSelectionChange extends ComponentEvent {
 	readonly selection: ISelection;
+	readonly empty: boolean;
 }