x4js 1.4.21 → 1.4.26

package/README.md

@@ -1,5 +1,5 @@
-# x4js
+# x4js framework
 
-**x4js framework repository**
+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.
@@ -92,6 +92,7 @@ class Application extends base_component_1.BaseComponent {
         }
     }
     ApplicationCreated() {
+        this.setTitle('');
     }
     get app_name() {
         return this.m_app_name;
@@ -123,24 +124,31 @@ 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);
+        if (!this.m_props.renderTo) {
+            dest.setStyleValue('position', 'absolute');
+        }
+        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;
     }
     setTitle(title) {
-        x4dom_1.x4document.title = this.m_app_name + ' > ' + title;
+        x4dom_1.x4document.title = this.m_app_name + (title ? (' > ' + title) : '');
     }
     disableZoomWheel() {
         window.addEventListener('wheel', function (ev) {

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

@@ -346,14 +346,14 @@ class Dialog extends popup_1.Popup {
         let trc = this.m_el_title.getBoundingRect();
         let dx = x - rc.left, dy = y - rc.top;
         let cstyle = this.getComputedStyle();
-        let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
-        let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
-        let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
-        let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
-        wrc.top += topw - trc.height;
-        wrc.height -= topw + botw - trc.height;
-        wrc.left += lftw;
-        wrc.width -= lftw + rgtw;
+        //let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
+        //let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
+        //let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
+        //let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
+        //wrc.top += topw - trc.height;
+        //wrc.height -= topw + botw - trc.height;
+        //wrc.left += lftw;
+        //wrc.width -= lftw + rgtw;
         // custom handling double click
         const now = Date.now();
         const delta = now - this.m_last_down;
@@ -367,19 +367,32 @@ class Dialog extends popup_1.Popup {
             return;
         }
         let __move = (ex, ey) => {
-            let x = ex - dx, y = ey - dy;
-            if (x + rc.width < wrc.left) {
-                x = wrc.left - rc.width;
+            if (ex > wrc.right) {
+                ex = wrc.right;
             }
-            else if (x > wrc.right) {
-                x = wrc.right;
+            else if (ex < wrc.left) {
+                ex = wrc.left;
             }
-            if (y < wrc.top) { // title grip is on top
-                y = wrc.top;
+            if (ey > wrc.bottom) {
+                ey = wrc.bottom;
             }
-            else if (y > wrc.bottom) {
-                y = wrc.bottom;
+            else if (ey < wrc.top) {
+                ey = wrc.top;
             }
+            let x = ex - dx, y = ey - dy;
+            //if (x + rc.width < wrc.left) {
+            //	x = wrc.left - rc.width;
+            //}
+            //else if (x > wrc.right) {
+            //	x = wrc.right;
+            //}
+            //
+            //if (y < wrc.top) { // title grip is on top
+            //	y = wrc.top;
+            //}
+            //else if (y > wrc.bottom) {
+            //	y = wrc.bottom;
+            //}
             this.setStyle({
                 left: x,
                 top: y

package/lib/fileupload.d.ts

@@ -55,10 +55,10 @@ export declare class ImageUpload extends FileUpload {
  * @param extensions - string - ex: '.doc,.docx'
  * @param cb - callback to call when user select a file
  */
-export declare function openFile(extensions: string, cb: (filename: FileList) => void, multiple?: boolean): void;
+export declare function openFileDialog(extensions: string, cb: (filename: FileList) => void, multiple?: boolean): void;
 /**
  * open saveas dialog
  * @param defFileName - string - proposed filename
  * @param cb - callback to call when user choose the destination
  */
-export declare function saveFile(defFileName: string, extensions: string, cb: (filename: File) => void): void;
+export declare function saveFileDialog(defFileName: string, extensions: string, cb: (filename: File) => void): void;

package/lib/fileupload.js

@@ -28,7 +28,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveFile = exports.openFile = exports.ImageUpload = exports.FileUpload = void 0;
+exports.saveFileDialog = exports.openFileDialog = exports.ImageUpload = exports.FileUpload = void 0;
 const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const layout_1 = require("./layout");
@@ -136,7 +136,7 @@ function _createFileInput() {
  * @param extensions - string - ex: '.doc,.docx'
  * @param cb - callback to call when user select a file
  */
-function openFile(extensions, cb, multiple = false) {
+function openFileDialog(extensions, cb, multiple = false) {
     let fi = _createFileInput();
     fi.removeAttribute('nwsaveas');
     fi.setAttribute('accept', extensions);
@@ -149,13 +149,13 @@ function openFile(extensions, cb, multiple = false) {
     });
     fi.dom.click();
 }
-exports.openFile = openFile;
+exports.openFileDialog = openFileDialog;
 /**
  * open saveas dialog
  * @param defFileName - string - proposed filename
  * @param cb - callback to call when user choose the destination
  */
-function saveFile(defFileName, extensions, cb) {
+function saveFileDialog(defFileName, extensions, cb) {
     let fi = _createFileInput();
     fi.setAttribute('nwsaveas', defFileName);
     fi.setAttribute('accept', extensions);
@@ -167,4 +167,4 @@ function saveFile(defFileName, extensions, cb) {
     });
     fi.dom.click();
 }
-exports.saveFile = saveFile;
+exports.saveFileDialog = saveFileDialog;

package/lib/gridview.js

@@ -844,16 +844,18 @@ class GridView extends layout_1.VLayout {
         }
         this.m_footer.enumChilds((c) => {
             let cid = c.getData('col');
-            let col = this.m_columns[cid];
-            let fmt = col.formatter;
-            let text;
-            if (fmt && fmt instanceof Function) {
-                text = fmt(rec[col.id], rec);
-            }
-            else {
-                text = rec[col.id];
+            if (cid) {
+                let col = this.m_columns[cid];
+                let fmt = col.formatter;
+                let text;
+                if (fmt && fmt instanceof Function) {
+                    text = fmt(rec[col.id], rec);
+                }
+                else {
+                    text = rec[col.id];
+                }
+                c.setContent(text, false);
             }
-            c.setContent(text, false);
         });
     }
 }

package/lib/listview.d.ts

@@ -134,8 +134,8 @@ export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
     /**
      * return the current selection or null
      */
-    get selection(): ListViewItem;
-    set selection(id: ListViewItem);
+    get selection(): any;
+    set selection(id: any);
     private _findItemWithId;
     /**
      * append or prepend a new item

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
@@ -195,15 +203,23 @@ class MenuItem extends component_1.Component {
     }
     /** @ignore */
     render(props) {
-        let icon = props.icon ?? 0x20;
+        let icon = props.icon ?? 0;
         let text = props.text;
         if (props.checked !== undefined) {
-            icon = props.checked ? 'cls(far fa-check)' : 0; //todo: use stylesheet
+            icon = props.checked ? 'var( --x4-icon-check )' : 0;
+        }
+        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');
-            popIco = new icon_1.Icon("var( --x4-icon-chevron-right )");
+            popIco = new icon_1.Icon({ icon: "var( --x4-icon-chevron-right )", cls: "pop-mark" });
         }
         if (!text && !icon) {
             this.addClass('@separator');

package/lib/popup.js

@@ -126,7 +126,10 @@ class Popup extends component_1.Container {
     }
     centerOnScreen() {
         let rc = this.getBoundingRect();
-        let x = (x4dom_1.x4document.body.clientWidth - rc.width) / 2, y = (x4dom_1.x4document.body.clientHeight - rc.height) / 2;
+        //let x = (x4document.body.clientWidth - rc.width) / 2,
+        //	y = (x4document.body.clientHeight - rc.height) / 2;
+        const x = `max( 0px, 50vw - ${rc.width / 2}px )`; //(x4dom_1.x4document.body.clientWidth - rc.width) / 2;
+        const y = `max( 0px, 50vh - ${rc.height / 2}px )`; //(x4dom_1.x4document.body.clientHeight - rc.height) / 2;
         this.setStyleValue('left', x);
         this.setStyleValue('top', y);
     }

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

@@ -389,6 +389,7 @@ class Spreadsheet extends layout_1.VLayout {
         if (this.m_recycler.length) {
             cell = this.m_recycler.pop();
             cell.clearClasses();
+            cell.addClass('@comp'); // todo: find better to reset to default
         }
         else {
             cell = new component_1.Component({
@@ -492,7 +493,8 @@ class Spreadsheet extends layout_1.VLayout {
                 cell.setStyle({
                     left: x,
                     top: top + y,
-                    width: calcw[colIdx]
+                    width: calcw[colIdx],
+                    height: this.m_itemHeight
                 });
                 if (this.m_selection.row == rowIdx && this.m_selection.col == colIdx) {
                     cell.addClass('@selected');