x4js 1.5.22 → 1.5.24

package/lib/src/component.ts

@@ -174,6 +174,7 @@ interface CInternalProps {
 	dom_events: any;
 	classes: IMap<boolean>;
 	uid: number;
+	created: boolean;
 	inrender: boolean;
 }
 
@@ -891,6 +892,18 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 
 		// notify descendants that we have been created (dom exists)
 
+		const notify = ( c: Component ) => {
+
+			if( !c.m_iprops.created ) {
+				if (c.dom && c.m_iprops.dom_events && c.m_iprops.dom_events.create) {
+					c.dom.dispatchEvent(new Event('create'));
+				}
+		
+				c.componentCreated();
+				c.m_iprops.created = true;
+			}
+		}
+
 		for (let mutation of mutations) {
 
 			if (mutation.type == 'childList') {
@@ -902,24 +915,16 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 
 					if (el) {
 						el.enumChilds((c: Component) => {
-
-							if (c.dom && c.m_iprops.dom_events && c.m_iprops.dom_events.create) {
-								c.dom.dispatchEvent(new Event('create'));
-							}
-
-							c.componentCreated();
-
+							notify( c );
 						}, true);
 
-						if (el.m_iprops.dom_events && el.m_iprops.dom_events.create) {
-							el.dom.dispatchEvent(new Event('create'));
-						}
-
-						el.componentCreated();
+						notify( el );
 					}
 				}
 			}
 		}
+
+		
 	}
 
 	public dispose() {
@@ -953,6 +958,7 @@ export class Component<P extends CProps<CEventMap> = CProps<CEventMap>, E extend
 		}
 
 		this.componentDisposed();
+		this.m_iprops.created = false;
 		// todo: pb on update this.removeAllListeners( null );
 	}
 

package/lib/src/datastore.ts

@@ -39,7 +39,6 @@ export type FieldType = 'string' | 'int' | 'float' | 'date' | 'bool' | 'array' |
 export type DataIndex = Uint32Array;
 
 interface EvDataChange extends BasicEvent {
-
 	type: string;
 	id: any;
 }
@@ -49,6 +48,8 @@ function EvDataChange( type: 'create' | 'update' | 'delete' | 'data' | 'change',
 }
 
 
+
+
 /**
  * fields definition
  * 	field with index=0 is record id
@@ -553,55 +554,55 @@ interface DataEventMap extends BaseComponentEventMap {
 	change?: EvChange;
 }
 
+type DataSolver = ( data: any ) => Record[];
+
 export interface DataProxyProps extends BaseComponentProps<DataEventMap> {
-	type: 'local' | 'immediate' | 'ajax';
-	path?: string;
-	params?: any;
+	url: string;
+	params?: string[];
+	solver?: DataSolver;
 }
 
 export class DataProxy extends BaseComponent<DataProxyProps,DataEventMap> {
-	
+
 	constructor( props: DataProxyProps ) {
 		super( props );
 	}
 
-	load( ) {
+	load( url?: string ) {
+		if( url ) {
+			this.m_props.url = url;
+		}
+
 		this._refresh( );
 	}	
 
-	save( data ) {
-		if( this.m_props.type=='local' ) {
-			console.assert( false );	// not imp
-			/*
-			const fs = require('fs');
-			fs.writeFileSync( this.m_path, data );
-			*/
-		}
-	}
-
 	private _refresh( delay: number = 0 ) {
 
-		if( this.m_props.type=='local' ) {
-			console.assert( false );	// not imp
-			/*
-			const fs = require('fs');
-			fs.readFile( this.m_path, ( _, bdata ) => {;
-				let data = JSON.parse(bdata);
-				this.emit( 'dataready', data );
-			} );
-			*/
+		const load = async ( ) => {
+
+			let url = this.m_props.url;
+			if( this.m_props.params ) {
+				url += '?' + this.m_props.params.join( '&' );
+			}
+
+			const r = await fetch( url );
+			if( r.ok ) {
+				const raw = await r.json( );
+				
+				let json = raw;
+				if( this.m_props.solver ) {
+					json = this.m_props.solver( json );
+				}
+
+				this.emit( 'change', EvChange(json,raw) );
+			}
+		}
+
+		if( delay ) {
+			setTimeout( load, delay );
 		}
 		else {
-			setTimeout( ( ) => {
-				ajaxRequest( {
-					url: this.m_props.path,
-					method: 'GET',
-					params: this.m_props.params,
-					success: ( data ) => {
-						this.emit( 'change', EvChange(data) );
-					}
-				});
-			}, delay );
+			load( );
 		}
 	}
 }
@@ -650,7 +651,13 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 			this.setRawData( props.data );
 		}
 		else if( props.url ) {
-			this.load( props.url );
+			this.m_proxy = new DataProxy( {
+				url: props.url,
+				solver: props.solver,
+				events: { change: (ev) => { this.setData( ev.value ); } }
+			});
+
+			this.m_proxy.load( );
 		}
 	}
 
@@ -659,27 +666,8 @@ export class DataStore extends EventSource<DataStoreEventMap> {
 	 * @param records 
 	 */
 
-	load( url: string ) {
-
-		//todo: that
-		if( url.substr(0,7)==='file://' ) {
-			this.m_proxy = new DataProxy( {
-				type: 'local',
-				path: url.substr( 7 ),
-				events: { change: (ev) => { this.setData( ev.value ); } }
-			});
-	
-			this.m_proxy.load( );
-		}
-		else {
-			this.m_proxy = new DataProxy( {
-				type: 'ajax',
-				path: url,
-				events: { change: (ev) => { this.setData( ev.value ); } }
-			});
-
-			this.m_proxy.load( );
-		}
+	load( url?: string ) {
+		this.m_proxy.load( url );
 	}
 
 	reload( ) {

package/lib/src/drag_manager.ts

@@ -34,7 +34,12 @@ import { Point } from './tools';
 
 const x_drag_cb = Symbol( 'x-drag-cb' );
 
-type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, point: Point ) => void;
+interface DropInfo {
+	pt: Point;
+	data: DataTransfer;
+}
+
+type DropCallback = ( command: 'enter' | 'leave' | 'drag' | 'drop', el: Component, infos: DropInfo ) => void;
 type FilterCallback = ( el: Component ) => boolean;
 
 /**
@@ -91,10 +96,10 @@ class DragManager {
 	 * 
 	 */
 
-	registerDropTarget(el: Component, cb: DropCallback, filterCB: FilterCallback ) {
+	registerDropTarget(el: Component, cb: DropCallback, filterCB?: FilterCallback ) {
 
 		const dragEnter = (ev: DragEvent) => {
-			if( !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
@@ -108,7 +113,7 @@ class DragManager {
 		const dragOver = (ev: DragEvent) => {
 			//console.log( "dragover", ev.target );
 			
-			if( !filterCB(this.dragSource) ) {
+			if( filterCB && !filterCB(this.dragSource) ) {
 				console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
@@ -122,7 +127,12 @@ class DragManager {
 			}
 
 			if( this.dropTarget ) {
-				cb( 'drag', this.dragSource, {x:ev.pageX,y:ev.pageY} );
+				const infos = {
+					pt: new Point( ev.pageX, ev.pageY ),
+					data: ev.dataTransfer,
+				}
+
+				cb( 'drag', this.dragSource, infos );
 			}
 
 			ev.dataTransfer.dropEffect = 'copy';
@@ -135,10 +145,17 @@ class DragManager {
 		};
 
 		const drop = (ev: DragEvent) => {
-			cb('drop', this.dragSource, {x:ev.pageX,y:ev.pageY} );
+			const infos = {
+				pt: new Point( ev.pageX, ev.pageY ),
+				data: ev.dataTransfer,
+			}
+
+			cb('drop', this.dragSource, infos );
 			
 			this.dropTarget = null;
 			el.removeClass('drop-over');
+
+			ev.preventDefault();
 		}
 
 		el.setDomEvent('dragenter', dragEnter);

package/lib/src/layout.ts

@@ -153,7 +153,8 @@ interface CellData {
 	width?: number;
 	height?: number;
 	cls?: string;
-	item: ComponentContent;
+	item?: ComponentContent;
+	data?: any;
 }
 
 export class TableLayout extends Container<TableLayoutProps> {
@@ -204,6 +205,17 @@ export class TableLayout extends Container<TableLayoutProps> {
 		this._setCell(row, col, cell, true);
 	}
 
+	setCellData(row: number, col: number, data: any ) {
+		let cell = this._getCell(row, col);
+		cell.data = data;
+		this._setCell(row, col, cell, true);
+	}
+
+	getCellData(row: number, col: number ) {
+		let cell = this._getCell(row, col, false);
+		return cell?.data;
+	}
+
 	merge(row: number, col: number, rowCount: number, colCount: number) {
 		let cell = this._getCell(row, col);
 		cell.rowSpan = rowCount;

package/lib/src/router.ts

@@ -93,18 +93,46 @@ function parseRoute(str: string | RegExp, loose = false): Segment {
 interface RouterEventMap extends EventMap {
 	error: EvError;
 }
-   
+
+
+/**
+ * micro router
+ * 
+ * ```
+ * const router = new Router( );
+ * 
+ * router.get( "/detail/:id", ( params: any ) => {
+ * 	this._showDetail( detail );
+ * } );
+ * 
+ * router.get( "/:id", ( params: any ) => {
+ *   if( params.id==0 )
+ * 		router.navigate( '/home' );
+ *	 }
+ * });
+ * 
+ * router.on( "error", ( ) => {
+ * 	router.navigate( '/home' );
+ * })
+ * 
+ * router.init( );
+ * ```
+ */
+
+
 export class Router extends EventSource< RouterEventMap > {
 
-	private routes: Route[];
+	private m_routes: Route[];
+	private m_useHash: boolean;
 
-	constructor() {
+	constructor( useHash = true ) {
 		super( );
 
-		this.routes = [];
+		this.m_routes = [];
+		this.m_useHash = useHash;
 
 		window.addEventListener('popstate', (event) => {
-			const url = x4document.location.pathname;
+			const url = this._getLocation( );
 			const found = this._find(url);
 		
 			found.handlers.forEach(h => {
@@ -115,11 +143,15 @@ export class Router extends EventSource< RouterEventMap > {
 
 	get(uri: string | RegExp, handler: RouteHandler ) {
 		let { keys, pattern } = parseRoute(uri);
-		this.routes.push({ keys, pattern, handler });
+		this.m_routes.push({ keys, pattern, handler });
 	}
 
 	init() {
-		this.navigate( window.location.pathname );
+		this.navigate( this._getLocation() );
+	}
+
+	private _getLocation( ) {
+		return this.m_useHash ? '/'+x4document.location.hash.substring(1) : x4document.location.pathname;
 	}
 
 	navigate( uri: string, notify = true ) {
@@ -133,7 +165,16 @@ export class Router extends EventSource< RouterEventMap > {
 			return;
 		}
 
-		window.history.pushState({}, '', uri )
+		if( this.m_useHash ) {
+			while( uri.startsWith('/') ) {
+				uri = uri.substring( 1 );
+			}
+			
+			window.history.pushState({}, '', '#'+uri );
+		}
+		else {
+			window.history.pushState({}, '', uri );
+		}
 
 		if( notify ) {
 			found.handlers.forEach( h => {
@@ -148,7 +189,7 @@ export class Router extends EventSource< RouterEventMap > {
 		let params = {};
 		let handlers = [];
 
-		for (const tmp of this.routes ) {
+		for (const tmp of this.m_routes ) {
 			if (!tmp.keys ) {
 				matches = tmp.pattern.exec(url);
 				if (!matches) {

package/lib/src/version.ts

@@ -27,4 +27,4 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 
-export const x4js_version = "1.5.22";
+export const x4js_version = "1.5.24";

package/lib/types/action.d.ts

@@ -0,0 +1,57 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file action.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+import { BasicEvent, EvChange } from './x4events';
+import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
+import { IconID } from "./icon";
+import { EventHandler } from './component';
+export interface EvAction extends BasicEvent {
+}
+export declare function EvAction(source: Action): EvAction;
+interface ActionEventMap extends BaseComponentEventMap {
+    run: EvAction;
+    change: EvChange;
+}
+interface ActionProps extends BaseComponentProps<ActionEventMap> {
+    id?: any;
+    text?: string;
+    icon?: IconID;
+    disabled?: boolean;
+    hidden?: boolean;
+    checked?: boolean;
+    run: EventHandler<EvAction>;
+    change?: EventHandler<EvChange>;
+}
+export declare class Action extends BaseComponent<ActionProps, ActionEventMap> {
+    constructor(props: ActionProps);
+    get props(): ActionProps;
+    set text(t: string);
+    set icon(i: IconID);
+    fire(): void;
+}
+export {};

package/lib/types/app_sockets.d.ts

@@ -0,0 +1,29 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file app_sockets.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+export declare function setupWSMessaging(closeCB: () => void): void;

package/lib/types/application.d.ts

@@ -0,0 +1,104 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file application.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+import { EvMessage } from './x4events';
+import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
+import { Component } from './component';
+import { Settings } from './settings';
+interface ApplicationEventMap extends BaseComponentEventMap {
+    message: EvMessage;
+    global: EvMessage;
+}
+/**
+ *
+ */
+export interface ApplicationProps extends BaseComponentProps<ApplicationEventMap> {
+    app_name: string;
+    app_version: string;
+    app_uid?: string;
+    locale?: string;
+    renderTo?: HTMLElement;
+}
+/**
+ * Represents an x4 application, which is typically a single page app.
+ * You should inherit Application to define yours.
+ * Application derives from BaseComponent so you can use that to implement a global messaging system.
+ * @example ```ts
+ *
+ * // in yout main caode
+ * let app = new Application( );
+ *
+ * app.events.close.on( ( ev ) => {
+ * 	... do something
+ * });
+ *
+ * // somewhere else in the source
+ * function xxx( ) {
+ * 	let app = Application.instance( );
+ * 	app.events.close.emit( new Events.close() );
+ * }
+ */
+export declare class Application<P extends ApplicationProps = ApplicationProps, E extends ApplicationEventMap = ApplicationEventMap> extends BaseComponent<P, E> {
+    private static self;
+    /**
+     * the application singleton
+     */
+    static instance(): Application;
+    private m_mainView;
+    private m_app_name;
+    private m_app_version;
+    private m_app_uid;
+    private m_local_storage;
+    private m_user_data;
+    private m_touch_time;
+    private m_touch_count;
+    constructor(props: P);
+    ApplicationCreated(): void;
+    get app_name(): string;
+    get app_uid(): string;
+    get app_version(): string;
+    get local_storage(): Settings;
+    get user_data(): any;
+    get history(): any;
+    /**
+     * define the application root object (MainView)
+     * @example ```ts
+     *
+     * let myApp = new Application( ... );
+     * let mainView = new VLayout( ... );
+     * myApp.mainView = mainView;
+     */
+    setMainView(root: Component, clearBefore: boolean): void;
+    set mainView(root: Component);
+    get mainView(): Component;
+    setTitle(title: string): void;
+    disableZoomWheel(): void;
+    enterModal(enter: boolean): void;
+    enableTouchDblClick(): void;
+}
+export {};

package/lib/types/autocomplete.d.ts

@@ -0,0 +1,58 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file autocomplete.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+import { TextEdit, TextEditProps } from './textedit';
+/**
+ *
+ */
+interface AutoCompleteProps extends TextEditProps {
+    enumValues: (filter: string) => string[];
+}
+/**
+ *
+ */
+export declare class AutoComplete extends TextEdit<AutoCompleteProps> {
+    private m_popup;
+    private m_popvis;
+    private m_needval;
+    private m_lockpop;
+    constructor(props: AutoCompleteProps);
+    _onKey(e: KeyboardEvent): void;
+    private _onChange;
+    componentDisposed(): void;
+    /**
+     * display the popup
+     */
+    showPopup(items: string[]): void;
+    protected _validate(value: string): boolean;
+    validate(): boolean;
+    private _checkFocus;
+    private _hidePopup;
+    private _onFocus;
+}
+export {};