x4js 1.4.20 → 1.4.24

package/README.md

@@ -1,4 +1,5 @@
-# x4
-x4 framework repository
+# x4js framework
 
-You will find the documentation & tutorials [Here](https://github.com/rlibre/x4js/wiki/Introduction)
+This is the x4 framework repository.
+
+You will find the documentation & tutorials [Here](https://x4js.org)

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/icon.js

@@ -75,9 +75,15 @@ class Loader extends x4events_1.EventSource {
                     const r = await fetch(url);
                     if (r.ok) {
                         const svg = await r.text();
-                        this.svgs.set(url, svg);
-                        //console.log( 'signal=', url );
-                        this.signal('loaded', EvLoaded(url, svg));
+                        // check response, must be svg
+                        if (!svg.startsWith("<svg")) {
+                            console.error("svg loading error: ", svg);
+                            this.signal('loaded', EvLoaded(url, ""));
+                        }
+                        else {
+                            this.svgs.set(url, svg);
+                            this.signal('loaded', EvLoaded(url, svg));
+                        }
                     }
                 }
             };

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

@@ -29,7 +29,6 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Settings = void 0;
-const host_1 = require("./hosts/host");
 class Settings {
     m_data;
     m_name;
@@ -48,14 +47,14 @@ class Settings {
     }
     _save() {
         let data = JSON.stringify(this.m_data);
-        host_1.host.writeLocalStorage(this.m_name, data);
+        localStorage.setItem(this.m_name, data);
     }
     _load() {
         if (this.m_data) {
             return;
         }
         this.m_data = {};
-        let data = host_1.host.readLocalStorage(this.m_name);
+        let data = localStorage.getItem(this.m_name);
         if (data !== null) {
             data = JSON.parse(data);
             if (data) {

package/lib/x4dom.d.ts

@@ -1,5 +1,33 @@
 /**
- *
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file x4events.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.
+**/
+/**
+ * SSR preparation
  */
 interface IX4Document {
     createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K];

package/lib/x4dom.js

@@ -1,7 +1,32 @@
 "use strict";
 /**
- *
- */
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file x4events.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.x4document = void 0;
 exports.x4document = document;

package/lib/x4events.d.ts

@@ -5,7 +5,7 @@
 *   /  _  \____   _|
 *  /__/ \__\   |_|
 *
-* @file observable.ts
+* @file x4events.ts
 * @author Etienne Cochard
 *
 * Copyright (c) 2019-2022 R-libre ingenierie

package/lib/x4events.js

@@ -6,7 +6,7 @@
 *   /  _  \____   _|
 *  /__/ \__\   |_|
 *
-* @file observable.ts
+* @file x4events.ts
 * @author Etienne Cochard
 *
 * Copyright (c) 2019-2022 R-libre ingenierie

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.20",
+	"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]);
+			}
+		})
+	}
 }