x4js 1.4.22 → 1.4.24

package/lib/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 } from './x4events';
+import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
+import { IconID } from "./icon";
+import { EvChange, EventHandler } from 'x4js';
+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/action.js

@@ -0,0 +1,59 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @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.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Action = exports.EvAction = void 0;
+const x4events_1 = require("./x4events");
+const base_component_1 = require("./base_component");
+const x4js_1 = require("x4js");
+function EvAction(source) {
+    return (0, x4events_1.BasicEvent)({ source });
+}
+exports.EvAction = EvAction;
+class Action extends base_component_1.BaseComponent {
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, "run");
+    }
+    get props() {
+        return this.m_props;
+    }
+    set text(t) {
+        this.m_props.text = t;
+        this.emit("change", (0, x4js_1.EvChange)(this));
+    }
+    set icon(i) {
+        this.m_props.icon = i;
+        this.emit("change", (0, x4js_1.EvChange)(this));
+    }
+    fire() {
+        this.emit("run", EvAction(this));
+    }
+}
+exports.Action = Action;

package/lib/application.d.ts

@@ -91,8 +91,9 @@ export declare class Application<P extends ApplicationProps = ApplicationProps,
      *
      * let myApp = new Application( ... );
      * let mainView = new VLayout( ... );
-     * myApp.setMainView( mainView  );
+     * myApp.mainView = mainView;
      */
+    setMainView(root: Component, clearBefore: boolean): void;
     set mainView(root: Component);
     get mainView(): Component;
     setTitle(title: string): void;

package/lib/application.js

@@ -33,7 +33,7 @@ const x4dom_1 = require("./x4dom");
 const base_component_1 = require("./base_component");
 const component_1 = require("./component");
 const settings_1 = require("./settings");
-const tools_1 = require("./tools");
+const x4js_1 = require("x4js");
 const _x4_touch_time = Symbol();
 /**
  * Represents an x4 application, which is typically a single page app.
@@ -123,18 +123,22 @@ class Application extends base_component_1.BaseComponent {
      *
      * let myApp = new Application( ... );
      * let mainView = new VLayout( ... );
-     * myApp.setMainView( mainView  );
+     * myApp.mainView = mainView;
      */
-    set mainView(root) {
+    setMainView(root, clearBefore) {
+        const ddom = this.m_props.renderTo ?? x4dom_1.x4document.body;
+        const dest = (0, x4js_1.flyWrap)(ddom);
+        dest.addClass('x4-root-element');
+        if (clearBefore) {
+            dest._empty();
+        }
         this.m_mainView = root;
-        this.mainView.addClass('x4-root-element');
-        (0, tools_1.deferCall)(() => {
-            const dest = this.m_props.renderTo ?? x4dom_1.x4document.body;
-            while (dest.firstChild) {
-                dest.removeChild(dest.firstChild);
-            }
-            dest.appendChild(root._build());
-        });
+        root.setStyleValue('position', 'absolute');
+        root._build();
+        ddom.appendChild(root.dom);
+    }
+    set mainView(root) {
+        this.setMainView(root, false);
     }
     get mainView() {
         return this.m_mainView;

package/lib/base_component.d.ts

@@ -77,5 +77,11 @@ export declare class BaseComponent<P extends BaseComponentProps<BaseComponentEve
      * @param timeout
      */
     singleShot(callback: TimerCallback, timeout?: number): void;
+    /**
+     *
+     * @param props
+     * @param elements
+     */
+    mapPropEvents<N extends keyof E>(props: P, ...elements: N[]): void;
 }
 export {};

package/lib/base_component.js

@@ -94,5 +94,18 @@ class BaseComponent extends x4events_1.EventSource {
     singleShot(callback, timeout = 0) {
         setTimeout(callback, timeout);
     }
+    /**
+     *
+     * @param props
+     * @param elements
+     */
+    mapPropEvents(props, ...elements) {
+        elements.forEach(name => {
+            const n = name;
+            if (props[n]) {
+                this._on(n, props[n]);
+            }
+        });
+    }
 }
 exports.BaseComponent = BaseComponent;

package/lib/button.d.ts

@@ -28,6 +28,7 @@
 **/
 import { Component, CProps, CEventMap, HtmlString } from './component';
 import { EventCallback, EvClick, EvChange } from './x4events';
+import { Action } from './action';
 import { IconID } from './icon';
 import { MenuItem, MenuOrSep } from './menu';
 /**
@@ -48,6 +49,7 @@ interface ButtonProps<E extends ButtonEventMap = ButtonEventMap> extends CProps<
     autoRepeat?: number;
     menu?: MenuOrSep[] | MenuCallBack;
     click?: EventCallback<EvClick>;
+    action?: Action;
 }
 /**
  * Base button

package/lib/button.js

@@ -49,10 +49,21 @@ class BaseButton extends component_1.Component {
         this.mapPropEvents(props, 'click');
     }
     render(props) {
-        let icon = props.icon ? new icon_1.Icon({ icon: props.icon, cls: 'left', ref: 'l_icon' }) : null;
-        let label = new label_1.Label({ flex: 1, text: props.text ?? '', align: props.align, ref: 'label' });
-        let ricon = props.rightIcon ? new icon_1.Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
-        this.setContent([icon, label, ricon]);
+        const action = props.action;
+        let icon = props.icon;
+        let text = props.text;
+        if (action) {
+            if (!icon && action.props.icon) {
+                icon = action.props.icon;
+            }
+            if (text === undefined && action.props.text) {
+                text = action.props.text;
+            }
+        }
+        const ui_icon = icon ? new icon_1.Icon({ icon, cls: 'left', ref: 'l_icon' }) : null;
+        const ui_label = new label_1.Label({ flex: 1, text: text ?? '', align: props.align, ref: 'label' });
+        const ui_ricon = props.rightIcon ? new icon_1.Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+        this.setContent([ui_icon, ui_label, ui_ricon]);
         this._setTabIndex(props.tabIndex);
     }
     /**
@@ -115,6 +126,9 @@ class BaseButton extends component_1.Component {
         }
         else {
             this.emit('click', (0, x4events_1.EvClick)());
+            if (this.m_props.action) {
+                this.m_props.action.fire();
+            }
         }
     }
     /**

package/lib/component.d.ts

@@ -314,7 +314,6 @@ export declare class Component<P extends CProps<BaseComponentEventMap> = CProps<
      *
      */
     clearDomEvent<K extends keyof X4ElementEventMap>(type: K): void;
-    mapPropEvents<N extends keyof E>(props: P, ...elements: N[]): void;
     /**
      *
      * @param name

package/lib/component.js

@@ -849,14 +849,6 @@ class Component extends base_component_1.BaseComponent {
             }
         }
     }
-    mapPropEvents(props, ...elements) {
-        elements.forEach(name => {
-            const n = name;
-            if (props[n]) {
-                this._on(n, props[n]);
-            }
-        });
-    }
     /**
      *
      * @param name

package/lib/menu.d.ts

@@ -28,6 +28,7 @@
 **/
 import { CEventMap, Component, CProps } from './component';
 import { EvClick, EventCallback } from './x4events';
+import { Action } from './action';
 import { Popup, PopupProps } from './popup';
 import { IconID } from './icon';
 import { Label } from './label';
@@ -99,10 +100,13 @@ export interface MenuItemProps extends CProps {
     checked?: boolean;
     cls?: string;
     click?: EventCallback<EvClick>;
+    action?: Action;
 }
 export declare class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
     private m_menu;
     private m_isOpen;
+    private m_action;
+    constructor(action: Action);
     constructor(text: string, click: EventCallback<EvClick>);
     constructor(props: MenuItemProps);
     /** @ignore */

package/lib/menu.js

@@ -32,6 +32,7 @@ exports.MenuBar = exports.MenuItem = exports.Menu = exports.MenuTitle = exports.
 const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const x4events_1 = require("./x4events");
+const action_1 = require("./action");
 const popup_1 = require("./popup");
 const icon_1 = require("./icon");
 const label_1 = require("./label");
@@ -177,8 +178,15 @@ exports.Menu = Menu;
 class MenuItem extends component_1.Component {
     m_menu;
     m_isOpen;
+    m_action;
     constructor(a, b) {
-        if ((0, tools_1.isString)(a)) {
+        if (a instanceof action_1.Action) {
+            super({
+                click: () => { a.fire(); }
+            });
+            this.m_action = a;
+        }
+        else if ((0, tools_1.isString)(a)) {
             super({
                 text: a,
                 click: b
@@ -200,6 +208,14 @@ class MenuItem extends component_1.Component {
         if (props.checked !== undefined) {
             icon = props.checked ? 'cls(far fa-check)' : 0; //todo: use stylesheet
         }
+        if (this.m_action) {
+            if (!icon) {
+                icon = this.m_action.props.icon;
+            }
+            if (text === undefined) {
+                text = this.m_action.props.text;
+            }
+        }
         let popIco = null;
         if (this.isPopup) {
             this.addClass('@popup-menu-item');

package/lib/settings.js

@@ -47,14 +47,14 @@ class Settings {
     }
     _save() {
         let data = JSON.stringify(this.m_data);
-        localStorage.write(this.m_name, data);
+        localStorage.setItem(this.m_name, data);
     }
     _load() {
         if (this.m_data) {
             return;
         }
         this.m_data = {};
-        let data = localStorage.read(this.m_name);
+        let data = localStorage.getItem(this.m_name);
         if (data !== null) {
             data = JSON.parse(data);
             if (data) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.22",
+	"version": "1.4.24",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/action.ts

@@ -0,0 +1,88 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @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 } from './x4events'
+import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component'
+import { IconID } from "./icon"
+import { EvChange, EventHandler } from 'x4js';
+
+//TODO: implement all
+
+
+export interface EvAction extends BasicEvent {
+}
+
+export function EvAction( source: Action ) {
+	return BasicEvent<EvAction>({source});
+}
+
+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 class Action extends BaseComponent<ActionProps,ActionEventMap> {
+
+	constructor( props: ActionProps ) {
+		super( props );
+
+		this.mapPropEvents( props, "run" );
+	}
+
+	get props( ) {
+		return this.m_props;
+	}
+
+	set text( t: string ) {
+		this.m_props.text = t;
+		this.emit( "change", EvChange(this) );
+	}
+
+	set icon( i: IconID ) {
+		this.m_props.icon = i;
+		this.emit( "change", EvChange(this) );
+	}
+
+	fire( ) {
+		this.emit( "run", EvAction(this) );
+	}
+}
+

package/src/application.ts

@@ -34,6 +34,7 @@ import { Component } from './component'
 import { Settings } from './settings'
 import { deferCall } from './tools'
 import { _tr } from './i18n'
+import { flyWrap } from 'x4js'
 
 const _x4_touch_time = Symbol( );
 
@@ -165,21 +166,29 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
 	 * 
 	 * let myApp = new Application( ... );
 	 * let mainView = new VLayout( ... );
-	 * myApp.setMainView( mainView  );
+	 * myApp.mainView = mainView;
 	 */
 
-	 public set mainView( root: Component ) {
+	 public setMainView( root: Component, clearBefore: boolean ) {
+
+		const ddom = this.m_props.renderTo ?? x4document.body;
+		const dest = flyWrap( ddom );
+
+		dest.addClass( 'x4-root-element' );
+		if( clearBefore ) {
+			dest._empty( );
+		}
 
 		this.m_mainView = root;
-		this.mainView.addClass( 'x4-root-element' );
 
-		deferCall( ( ) => {
-			const dest = this.m_props.renderTo ?? x4document.body;
-			while (dest.firstChild) {
-				dest.removeChild(dest.firstChild);
-			}
-			dest.appendChild(root._build());
-		} );
+		root.setStyleValue( 'position', 'absolute' );
+		root._build();
+
+		ddom.appendChild( root.dom );
+	}
+
+	set mainView( root: Component ) {
+		this.setMainView( root, false );
 	}
 
 	public get mainView( ) : Component {

package/src/base_component.ts

@@ -132,4 +132,19 @@ export class BaseComponent< P extends BaseComponentProps<BaseComponentEventMap>,
 	singleShot( callback: TimerCallback, timeout = 0 ) {
 		setTimeout( callback, timeout );
 	}
+
+	/**
+	 * 
+	 * @param props 
+	 * @param elements 
+	 */
+	
+	public mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
+		elements.forEach( name => {
+			const n = name as string;
+			if (props[n]) {
+				this._on(n, props[n]);
+			}
+		})
+	}
 }

package/src/button.ts

@@ -31,6 +31,7 @@
 import { Component, CProps, CEventMap, HtmlString } from './component'
 import { EventCallback, EvClick, EvChange } from './x4events'
 
+import { Action } from './action'
 import { Icon, IconID } from './icon'
 import { Label } from './label'
 import { Menu, MenuItem, MenuOrSep } from './menu'
@@ -57,8 +58,9 @@ interface ButtonProps<E extends ButtonEventMap = ButtonEventMap> extends CProps<
 	align?: 'center' | 'left' | 'right';	// text alignment
 	autoRepeat?: number; // time in ms or 0/undefined for none
 	menu?: MenuOrSep[] | MenuCallBack;
-
 	click?: EventCallback<EvClick>;	// shortcut to events: { click: ... }
+
+	action?: Action;
 }
 
 
@@ -83,11 +85,26 @@ export class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEve
 
 	render(props: ButtonProps) {
 
-		let icon = props.icon ? new Icon({ icon: props.icon, cls: 'left', ref: 'l_icon' }) : null;
-		let label = new Label({ flex: 1, text: props.text ?? '', align: props.align, ref: 'label' });
-		let ricon = props.rightIcon ? new Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+		const action = props.action;
+		
+		let icon = props.icon;
+		let text = props.text;
+		
+		if( action ) {
+			if( !icon && action.props.icon ) {
+				icon = action.props.icon;
+			}
+
+			if( text===undefined && action.props.text ) {
+				text = action.props.text;
+			}
+		}
 
-		this.setContent([icon, label, ricon]);
+		const ui_icon = icon ? new Icon({ icon, cls: 'left', ref: 'l_icon' }) : null;
+		const ui_label = new Label({ flex: 1, text: text ?? '', align: props.align, ref: 'label' });
+		const ui_ricon = props.rightIcon ? new Icon({ icon: props.rightIcon, cls: 'right', ref: 'r_icon' }) : null;
+
+		this.setContent([ui_icon, ui_label, ui_ricon]);
 		this._setTabIndex(props.tabIndex);
 	}
 
@@ -164,6 +181,9 @@ export class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEve
 		}
 		else {
 			this.emit('click', EvClick());
+			if( this.m_props.action ) {
+				this.m_props.action.fire( );
+			}
 		}
 	}
 

package/src/component.ts

@@ -41,6 +41,7 @@ import { _tr } from './i18n';
 import { BasicEvent, EventCallback } from './x4events';
 import { BaseComponent, BaseComponentProps, BaseComponentEventMap } from './base_component';
 import { IDOMEvents, X4ElementEventMap } from './dom_events';
+import { IconID } from 'x4js';
 
 export { HtmlString, isHtmlString, html } from './tools'
 
@@ -1143,15 +1144,6 @@ export class Component<P extends CProps<BaseComponentEventMap> = CProps<BaseComp
 		}
 	}
 
-	public mapPropEvents<N extends keyof E>(props: P, ...elements: N[] ) {
-		elements.forEach( name => {
-			const n = name as string;
-			if (props[n]) {
-				this._on(n, props[n]);
-			}
-		})
-	}
-
 	/**
 	 * 
 	 * @param name 
@@ -2333,4 +2325,6 @@ export class Container<P extends ContainerProps = ContainerProps, E extends Cont
 	}
 }
 
-export type ComponentConstructor<T> = new (props: CProps) => T;
+export type ComponentConstructor<T> = new (props: CProps) => T;
+
+

package/src/menu.ts

@@ -32,6 +32,8 @@ import { x4document } from './x4dom'
 import { CEventMap, Component, CProps } from './component'
 import { EvClick, EventCallback } from './x4events'
 
+import { Action } from './action'
+
 import { Popup, PopupProps } from './popup'
 import { Icon, IconID } from './icon'
 import { Label } from './label'
@@ -244,8 +246,9 @@ export interface MenuItemProps extends CProps {
 	items?: MenuOrSep[];
 	checked?: boolean;
 	cls?: string;
-
 	click?: EventCallback<EvClick>;	// shortcut to events: { click ... }
+	
+	action?: Action;
 }
 
 
@@ -254,12 +257,21 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 
 	private m_menu: Menu;
 	private m_isOpen: boolean;
+	private m_action: Action;
 
+	constructor( action: Action );
 	constructor( text: string, click: EventCallback<EvClick> );
 	constructor( props: MenuItemProps);
 	constructor( a, b? ) {
 
-		if( isString(a) ) {
+		if( a instanceof Action ) {
+			super( {
+				click: ( ) => { a.fire(); }
+			});
+
+			this.m_action = a;
+		}
+		else if( isString(a) ) {
 			super( {
 				text: a,
 				click: b
@@ -288,6 +300,16 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
 			icon = props.checked ? 'cls(far fa-check)' : 0;	//todo: use stylesheet
 		}
 
+		if( this.m_action ) {
+			if( !icon ) {
+				icon = this.m_action.props.icon;
+			}
+
+			if( text===undefined ) {
+				text = this.m_action.props.text;
+			}
+		}
+
 		let popIco = null;
 		if (this.isPopup) {
 			this.addClass('@popup-menu-item');

package/src/settings.ts

@@ -50,7 +50,7 @@ export class Settings {
 
 	private _save( ) {
 		let data = JSON.stringify(this.m_data);
-		localStorage.write( this.m_name, data );
+		localStorage.setItem( this.m_name, data );
 	}
 
 	private _load( ) {
@@ -60,7 +60,7 @@ export class Settings {
 
 		this.m_data = {};
 
-		let data = localStorage.read( this.m_name );
+		let data = localStorage.getItem( this.m_name );
 		if( data!==null ) {
 			data = JSON.parse( data );
 			if( data ) {

package/src/smartedit.ts

@@ -1,537 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file smartedit.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 { x4document } from './dom-gen'
-
-import { TextEdit, TextEditProps } from './textedit'
-import { DataStore, DataView, Record } from './datastore'
-import { Popup, PopupProps, PopupEventMap } from './popup';
-import { Component, CProps, EvFocus } from './component';
-import { EvChange, EvClick } from './x4_events';
-
-type Renderer = (rec: Record) => CellData[];
-
-export interface ToolItem {
-	text: string;
-	callback: (target: TextEdit) => void;
-}
-
-export interface SmartEditProps extends TextEditProps {
-	store: DataStore;
-	field: string;
-	minDisplay?: number;	// min char number before displaying items
-	maxCount?: number;		// max count elements to display
-	autoFill?: boolean;		// force selected element into edit (cannot select empty)
-	renderer: Renderer;
-	tools?: ToolItem[];		// elements to add at end
-	searchCallback?: (value: string, view: DataView) => boolean
-}
-
-export class SmartEdit extends TextEdit<SmartEditProps> {
-
-	m_popup: PopupTable;
-	m_dataview: DataView;
-	m_field: string;
-	m_minDisplay: number;
-	m_maxCount: number;
-	m_autoFill: boolean;
-	m_renderer: Renderer;
-	m_tools: ToolItem[];
-	m_searchCallback: (value: string, view: DataView) => boolean;
-
-	constructor(props: SmartEditProps) {
-		super(props);
-
-		this.m_dataview = props.store.createView();
-		this.m_field = props.field;
-		this.m_renderer = props.renderer;
-		this.m_minDisplay = props.minDisplay ?? 0;
-		this.m_maxCount = props.maxCount ?? 10;
-		this.m_autoFill = props.autoFill === undefined ? true : props.autoFill;
-		this.m_popup = null;
-		this.m_tools = props.tools ?? [];
-		this.m_searchCallback = props.searchCallback;
-
-		this.on('change', (e) => this._onChange(e));
-		this.on('focus', (e) => this._onFocus(e));
-	}
-
-	render(props: SmartEditProps) {
-		super.render(props);
-
-		this.m_ui_input.setDomEvent('keydown', (e) => this._onKey(e));
-	}
-
-	private _onChange(ev: EvChange) {
-		this._showPopup(ev.value as string);
-	}
-
-	private _onFocus(ev: EvFocus) {
-		if (ev.focus) {
-			this._showPopup(this.value);
-		}
-		else if (this.m_popup) {
-			this.m_popup.close();
-		}
-	}
-
-	private _onKey(e) {
-
-		console.log(e.key);
-
-		switch (e.key) {
-			case 'Backspace': {
-
-				// remove selection
-				let start = e.target.selectionStart;
-				let end = e.target.selectionEnd;
-
-				if (start > end) {
-					let t = start;
-					start = end;
-					end = t;
-				}
-
-				let v = this.value;
-				let a = v.substr(0, start);
-				let b = v.substr(end);
-
-				this.value = a + b;
-				break;
-			}
-
-			case 'ArrowUp':
-			case 'Up': {
-				if (this.m_popup) {
-					this._moveNext(false);
-					e.preventDefault();
-				}
-
-				break;
-			}
-
-			case 'ArrowDown':
-			case 'Down': {
-				if (this.m_popup) {
-					this._moveNext(true);
-					e.preventDefault();
-				}
-
-				break;
-			}
-
-			case 'Enter': {
-				if (this.m_popup) {
-					this._checkTool(e);
-				}
-				break;
-			}
-		}
-	}
-
-	private _showSugg(text) {
-		let sel = this.getSelection();
-		this.value = text;
-		this.select(sel.start, sel.length);
-	}
-
-	isOpen() {
-		return this.m_popup !== null;
-	}
-
-
-	componentDisposed() {
-		if (this.m_popup) {
-			this.m_popup.close();
-		}
-
-		super.componentDisposed();
-	}
-
-	// enter pressed on an element
-	private _checkTool(e: KeyboardEvent) {
-
-		let sel = this.m_popup.selection;
-		if (this._callTool(sel)) {
-			e.preventDefault();
-		}
-	}
-
-	private _callTool(sel: number): boolean {
-		let data = this.m_popup.getRowData(sel) as ToolItem;
-		if (data) {
-			if (this.m_popup) {
-				this.m_popup.close();
-			}
-
-			data.callback(this);
-			return true;
-		}
-		else {
-			return false;
-		}
-	}
-
-	private _moveNext(next: boolean) {
-		let sel = this.m_popup.selNext(next);
-		console.log('movenext: ', sel);
-
-		let data = this.m_popup.getRowData(sel);
-
-		if (!data) {
-			let text = this.m_popup.getCell(sel, 0).text;
-			this._showSugg(text);
-		}
-	}
-
-	//_onKey( e: KeyboardEvent ) {
-	//	if( e.key==' ' ) {
-	//		this._showPopup( this.value )
-	//	}
-	//}
-
-	private _showPopup(v: string) {
-
-		if (this.m_popup) {
-			this.m_popup.close();
-			this.m_popup = null;
-		}
-
-		let cnt: number;
-
-		let sel = this.getSelection();
-		let search = sel.length ? v.substr(0, sel.start) : v;
-
-		if (search.length < this.m_minDisplay) {
-			return;
-		}
-
-		let autoFill = this.m_autoFill;
-
-		if (search.length == 0) {
-			cnt = this.m_dataview.filter(null);
-		}
-		else {
-			if (this.m_searchCallback) {
-				autoFill = this.m_searchCallback(search, this.m_dataview);
-				cnt = this.m_dataview.count;
-			}
-			else {
-				cnt = this.m_dataview.filter({
-					op: '=',
-					field: this.m_field,
-					value: new RegExp('^' + search.trim() + '.*', 'mi')
-				});
-			}
-		}
-
-		if (cnt > 0) {
-			let rec = this.m_dataview.getByIndex(0);
-
-			if (autoFill) {
-				this.value = rec.getField(this.m_field);
-			}
-
-			this.select(v.length);
-
-			let count = Math.min(this.m_dataview.count, this.m_maxCount);
-			let r2 = this.m_ui_input.getBoundingRect();
-
-			this.m_popup = new PopupTable({
-				cls: '@editor-popup',
-				minWidth: r2.width
-			});
-
-			this.m_popup.on('click', (ev: EvClick) => {
-
-				let { row, text } = ev.context;
-
-				if (!this._callTool(row)) {
-					this.value = text;
-					this.emit('click', EvClick());
-				}
-			});
-
-			let i;
-			for (i = 0; i < count; i++) {
-
-				let rec = this.m_dataview.getByIndex(i);
-				let texts = this.m_renderer(rec);
-
-				this.m_popup.setCell(i, 0, texts[0].text, texts[0].cls);
-				this.m_popup.setCell(i, 1, texts[1].text, texts[1].cls);
-			}
-
-			for (let j = 0; j < this.m_tools.length; j++, i++) {
-				this.m_popup.setCell(i, 0, this.m_tools[j].text);
-				this.m_popup.setCell(i, 1, '');
-				this.m_popup.setRowData(i, this.m_tools[j]);
-				console.log('fill: ', i);
-			}
-
-			this.m_popup.displayAt(r2.left, r2.bottom);
-		}
-		else if (this.m_tools.length) {
-			let r2 = this.m_ui_input.getBoundingRect();
-
-			this.m_popup = new PopupTable({
-				cls: '@editor-popup',
-				minWidth: r2.width
-			});
-
-			this.m_popup.on('click', (ev: EvClick) => {
-
-				let { row, text } = ev.context;
-				if (!this._callTool(row)) {
-					this.value = text;
-				}
-			});
-
-			for (let j = 0, i = 0; j < this.m_tools.length; j++, i++) {
-				this.m_popup.setCell(i, 0, this.m_tools[j].text);
-				this.m_popup.setCell(i, 1, '');
-				this.m_popup.setRowData(i, this.m_tools[j]);
-				console.log('fill: ', i);
-			}
-
-			this.m_popup.displayAt(r2.left, r2.bottom);
-		}
-	}
-}
-
-interface CellData {
-	text: string;
-	cls?: string;
-}
-
-type CellMap = Map<number, CellData>;
-
-interface PopupTableEventMap extends PopupEventMap {
-	click: EvClick;
-}
-
-interface PopupTableProps extends PopupProps<PopupTableEventMap> {
-	rows?: number;
-	cols?: number;
-	minWidth?: number;
-}
-
-
-
-export class PopupTable extends Popup<PopupTableProps, PopupTableEventMap> {
-
-	private m_rows: number;
-	private m_cols: number;
-	private m_cells: CellMap;
-	private m_data: Map<number, any>;
-	private m_minw: number;
-	private m_defcell: CellData;
-	private m_sel: number;
-
-	constructor(props: PopupTableProps) {
-		super(props);
-
-		this.m_rows = props.rows ?? 0;
-		this.m_cols = props.cols ?? 0;
-		this.m_minw = props.minWidth;
-		this.m_cells = new Map<number, CellData>();
-		this.m_data = new Map<number, any>();
-		this.m_defcell = { text: '', cls: undefined };
-		this.m_sel = 0;
-		this.enableMask(false);
-
-		this.setDomEvent('create', () => {
-			(<HTMLTableElement>this.dom).cellPadding = '0px';
-		});
-
-		this.setDomEvent('mousedown', (e: MouseEvent) => {
-			e.preventDefault();
-
-			let el = Component.getElement(<HTMLElement>e.target);
-			let row = el.getData('row');
-
-			this.m_sel = row;
-			this.update();
-
-			this.emit('click', EvClick({ row, text: this.getCell(row, 0).text }));
-		})
-	}
-
-	setRowData(row: number, data: any) {
-		this.m_data.set(row, data);
-	}
-
-	getRowData(row: number): any {
-		return this.m_data.get(row);
-	}
-
-	setCell(row: number, col: number, text: string, cls?: string) {
-		this.m_cells.set(_cid(row, col), { text, cls });
-
-		if (this.m_rows < (row + 1)) {
-			this.m_rows = (row + 1);
-		}
-
-		if (this.m_cols < (col + 1)) {
-			this.m_cols = (col + 1);
-		}
-	}
-
-	getCell(row, col): CellData {
-
-		let cd = this.m_cells.get(_cid(row, col));
-		if (cd == null) {
-			return this.m_defcell;
-		}
-
-		return cd;
-	}
-
-	/** @ignore */
-	render() {
-		this.setProp('tag', 'table');
-
-		if (this.m_minw) {
-			this.setStyleValue('minWidth', this.m_minw);
-		}
-
-		let rows = [];
-
-		for (let r = 0; r < this.m_rows; r++) {
-
-			let cols = [];
-			let data = { row: r };
-
-			for (let c = 0; c < this.m_cols; c++) {
-
-				let cell = this.getCell(r, c);
-
-				let col = new Component({
-					tag: 'td',
-					content: cell.text,
-					cls: cell.cls,
-					data
-				});
-
-				cols.push(col);
-			}
-
-			let cls = undefined;
-			if (r === this.m_sel) {
-				cls = '@selected';
-			}
-
-			let row = new Component({
-				tag: 'tr',
-				cls,
-				content: cols,
-				data
-			});
-
-			rows.push(row);
-		}
-
-		this.setContent(rows);
-	}
-
-	/**
-	* display the popup at a specific position
-	* @param x 
-	* @param y 
-	*/
-
-	public displayAt(x: number, y: number, align: string = 'top left') {
-
-		this.show();
-
-		let halign = 'l',
-			valign = 't';
-
-		if (align.indexOf('right') >= 0) {
-			halign = 'r';
-		}
-
-		if (align.indexOf('bottom') >= 0) {
-			valign = 'b';
-		}
-
-		// @TODO: this is a minimal overflow problem solution
-		let rc = x4document.body.getBoundingClientRect(),
-			rm = this.getBoundingRect();
-
-		if (halign == 'r') {
-			x -= rm.width;
-		}
-
-		if (valign == 'b') {
-			y -= rm.height;
-		}
-
-		if (x < 4) {
-			x = 4;
-		}
-
-		if ((x + rm.width) > rc.right - 4) {
-			x = rc.right - 4 - rm.width;
-		}
-
-		if (y < 4) {
-			y = 4;
-		}
-
-		if ((y + rm.height) > rc.bottom - 4) {
-			y = rc.bottom - 4 - rm.height;
-		}
-
-		this.setStyle({ left: x, top: y });
-	}
-
-	selNext(next: boolean): number {
-
-		this.m_sel += next ? 1 : -1;
-		if (this.m_sel >= this.m_rows) {
-			this.m_sel = 0;
-		}
-		else if (this.m_sel < 0) {
-			this.m_sel = this.m_rows - 1;
-		}
-
-		this.update();
-		return this.m_sel;
-	}
-
-	get selection() {
-		return this.m_sel;
-	}
-}
-
-
-function _cid(row: number, col: number) {
-	return row * 1000 + col;
-}