x4js 1.4.4 → 1.4.7

package/lib/index.js

@@ -1,55 +1,71 @@
-export * from "./application";
-export * from "./base_component";
-export * from "./base64";
-export * from "./button";
-export * from "./calendar";
-export * from "./canvas";
-export * from "./cardview";
-export * from "./checkbox";
-export * from "./color";
-export * from "./colorpicker";
-export * from "./combobox";
-export * from "./component";
-export * from "./datastore";
-export * from "./dialog";
-export * from "./dom_events";
-export * from "./drag_manager";
-export * from "./drawtext";
-export * from "./fileupload";
-export * from "./form";
-export * from "./formatters";
-export * from "./gridview";
-export * from "./i18n";
-export * from "./icon";
-export * from "./image";
-export * from "./input";
-export * from "./label";
-export * from "./layout";
-export * from "./link";
-export * from "./listview";
-export * from "./md5";
-export * from "./menu";
-export * from "./messagebox";
-export * from "./panel";
-export * from "./popup";
-export * from "./property_editor";
-export * from "./radiobtn";
-export * from "./rating";
-export * from "./request";
-export * from "./router";
-export * from "./settings";
-export * from "./sidebarview";
-export * from "./smartedit";
-export * from "./spreadsheet";
-export * from "./styles";
-export * from "./svgcomponent";
-export * from "./tabbar";
-export * from "./tabview";
-export * from "./textarea";
-export * from "./textedit";
-export * from "./texthiliter";
-export * from "./toaster";
-export * from "./tools";
-export * from "./tooltips";
-export * from "./treeview";
-export * from "./x4_events";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./application"), exports);
+__exportStar(require("./base_component"), exports);
+__exportStar(require("./base64"), exports);
+__exportStar(require("./button"), exports);
+__exportStar(require("./calendar"), exports);
+__exportStar(require("./canvas"), exports);
+__exportStar(require("./cardview"), exports);
+__exportStar(require("./checkbox"), exports);
+__exportStar(require("./color"), exports);
+__exportStar(require("./colorpicker"), exports);
+__exportStar(require("./combobox"), exports);
+__exportStar(require("./component"), exports);
+__exportStar(require("./datastore"), exports);
+__exportStar(require("./dialog"), exports);
+__exportStar(require("./dom_events"), exports);
+__exportStar(require("./drag_manager"), exports);
+__exportStar(require("./drawtext"), exports);
+__exportStar(require("./fileupload"), exports);
+__exportStar(require("./form"), exports);
+__exportStar(require("./formatters"), exports);
+__exportStar(require("./gridview"), exports);
+__exportStar(require("./i18n"), exports);
+__exportStar(require("./icon"), exports);
+__exportStar(require("./image"), exports);
+__exportStar(require("./input"), exports);
+__exportStar(require("./label"), exports);
+__exportStar(require("./layout"), exports);
+__exportStar(require("./link"), exports);
+__exportStar(require("./listview"), exports);
+__exportStar(require("./md5"), exports);
+__exportStar(require("./menu"), exports);
+__exportStar(require("./messagebox"), exports);
+__exportStar(require("./panel"), exports);
+__exportStar(require("./popup"), exports);
+__exportStar(require("./property_editor"), exports);
+__exportStar(require("./radiobtn"), exports);
+__exportStar(require("./rating"), exports);
+__exportStar(require("./request"), exports);
+__exportStar(require("./router"), exports);
+__exportStar(require("./settings"), exports);
+__exportStar(require("./sidebarview"), exports);
+__exportStar(require("./smartedit"), exports);
+__exportStar(require("./spreadsheet"), exports);
+__exportStar(require("./styles"), exports);
+__exportStar(require("./svgcomponent"), exports);
+__exportStar(require("./tabbar"), exports);
+__exportStar(require("./tabview"), exports);
+__exportStar(require("./textarea"), exports);
+__exportStar(require("./textedit"), exports);
+__exportStar(require("./texthiliter"), exports);
+__exportStar(require("./toaster"), exports);
+__exportStar(require("./tools"), exports);
+__exportStar(require("./tooltips"), exports);
+__exportStar(require("./treeview"), exports);
+__exportStar(require("./x4_events"), exports);

package/lib/input.d.ts

@@ -0,0 +1,86 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file input.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+import { Component, CProps, CEventMap } from './component';
+export declare type EditType = 'text' | 'number' | 'email' | 'date' | 'password' | 'file' | 'checkbox' | 'radio';
+export interface ValueHook {
+    get(): any;
+    set(v: any): void;
+}
+export interface InputEventMap extends CEventMap {
+}
+export interface InputProps<P extends InputEventMap = InputEventMap> extends CProps<P> {
+    value?: string;
+    name?: string;
+    type?: EditType;
+    placeHolder?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    tabIndex?: number | boolean;
+    pattern?: string;
+    uppercase?: boolean;
+    spellcheck?: boolean;
+    value_hook?: ValueHook;
+    min?: number;
+    max?: number;
+}
+/**
+ * base class for elements implementing an input
+ * CARE derived classes must set this.ui.input
+ */
+export declare class Input extends Component<InputProps, InputEventMap> {
+    constructor(props: InputProps);
+    /** @ignore */
+    render(props: InputProps): void;
+    getType(): EditType;
+    /**
+     * return the current editor value
+     */
+    get value(): string;
+    /**
+     * Change the editor value
+     * @param value - new value to set
+     */
+    set value(value: string);
+    getStoreValue(): any;
+    setStoreValue(v: any): void;
+    set readOnly(ro: boolean);
+    /**
+     * select all the text
+     */
+    selectAll(): void;
+    /**
+     * select a part of the text
+     * @param start
+     * @param length
+     */
+    select(start: number, length?: number): void;
+    /**
+     * get the selection as { start, length }
+     */
+    getSelection(): {
+        start: number;
+        length: number;
+    };
+}

package/lib/input.js

@@ -0,0 +1,176 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file input.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const component_1 = require("./component");
+/**
+ * base class for elements implementing an input
+ * CARE derived classes must set this.ui.input
+ */
+class Input extends component_1.Component {
+    constructor(props) {
+        super(props);
+    }
+    /** @ignore */
+    render(props) {
+        this.setProp('tag', 'input');
+        this._setTabIndex(props.tabIndex);
+        this.setAttributes({
+            value: props.value,
+            type: props.type || 'text',
+            name: props.name,
+            placeholder: props.placeHolder,
+            autofocus: props.autoFocus,
+            readonly: props.readOnly,
+            autocomplete: 'new-password',
+            tabindex: props.tabIndex,
+            spellcheck: props.spellcheck === false ? 'false' : undefined,
+            min: props.min,
+            max: props.max,
+            ...props.attrs
+        });
+        if (props.uppercase) {
+            this.setStyleValue('textTransform', 'uppercase');
+        }
+    }
+    getType() {
+        return this.m_props.type;
+    }
+    /**
+     * return the current editor value
+     */
+    get value() {
+        if (this.dom) {
+            this.m_props.value = this.dom.value;
+        }
+        if (this.m_props.uppercase) {
+            let upper = this.m_props.value.toUpperCase(); // todo: locale ?
+            if (this.dom && upper != this.m_props.value) {
+                this.dom.value = upper; // update the input
+            }
+            this.m_props.value = upper;
+        }
+        return this.m_props.value;
+    }
+    /**
+     * Change the editor value
+     * @param value - new value to set
+     */
+    set value(value) {
+        this.m_props.value = value;
+        if (this.dom) {
+            this.dom.value = value;
+        }
+    }
+    getStoreValue() {
+        if (this.m_props.value_hook) {
+            return this.m_props.value_hook.get();
+        }
+        else {
+            let type = this.getAttribute('type');
+            if (type) {
+                type = type.toLowerCase();
+            }
+            let value, dom = this.dom;
+            if (type === "file") {
+                value = [];
+                let files = dom.files;
+                for (let file = 0; file < files.length; file++) {
+                    value.push(files[file].name);
+                }
+            }
+            else if (type === 'checkbox') {
+                if (dom.checked) {
+                    value = 1;
+                }
+                else {
+                    value = 0;
+                }
+            }
+            else if (type === 'radio') {
+                if (dom.checked) {
+                    value = this.value;
+                }
+            }
+            else if (type === 'date') {
+                debugger;
+            }
+            else {
+                value = this.value;
+            }
+            return value;
+        }
+    }
+    setStoreValue(v) {
+        if (this.m_props.value_hook) {
+            return this.m_props.value_hook.set(v);
+        }
+        else {
+            let type = this.getAttribute('type'), dom = this.dom;
+            if (type) {
+                type = type.toLowerCase();
+            }
+            if (type === 'checkbox') {
+                let newval = v !== null && v !== '0' && v !== 0 && v !== false;
+                if (newval !== dom.checked) {
+                    dom.setAttribute('checked', '' + newval);
+                    dom.dispatchEvent(new Event('change'));
+                }
+            }
+            else {
+                this.value = v;
+            }
+        }
+    }
+    set readOnly(ro) {
+        this.setAttribute('readonly', ro);
+    }
+    /**
+     * select all the text
+     */
+    selectAll() {
+        this.dom.select();
+    }
+    /**
+     * select a part of the text
+     * @param start
+     * @param length
+     */
+    select(start, length = 9999) {
+        this.dom.setSelectionRange(start, start + length);
+    }
+    /**
+     * get the selection as { start, length }
+     */
+    getSelection() {
+        let idom = this.dom;
+        return {
+            start: idom.selectionStart,
+            length: idom.selectionEnd - idom.selectionStart,
+        };
+    }
+}
+exports.Input = Input;

package/lib/label.d.ts

@@ -0,0 +1,54 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file label.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+import { Component, CProps } from './component';
+import { HtmlString } from './tools';
+import { IconID } from './icon';
+export interface LabelProps extends CProps {
+    text: string | HtmlString;
+    icon?: IconID;
+    align?: 'left' | 'right' | 'center';
+    multiline?: boolean;
+}
+/**
+ * Standard label
+ */
+export declare class Label extends Component<LabelProps> {
+    /**
+     * double constructor, from string/html or as usual
+     */
+    constructor(props: LabelProps);
+    constructor(text: string | HtmlString);
+    /** @ignore */
+    render(props: LabelProps): void;
+    /**
+     * change the displayed text
+     * @param text - new text
+     */
+    set text(txt: string | HtmlString);
+    /**
+     *
+     */
+    get text(): string | HtmlString;
+}

package/lib/label.js

@@ -0,0 +1,90 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file label.ts
+* @author Etienne Cochard
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const component_1 = require("./component");
+const tools_1 = require("./tools");
+const icon_1 = require("./icon");
+/**
+ * Standard label
+ */
+class Label extends component_1.Component {
+    constructor(param) {
+        if (typeof (param) === 'string' || param instanceof tools_1.HtmlString) {
+            super({ text: param });
+        }
+        else {
+            super(param);
+        }
+    }
+    /** @ignore */
+    render(props) {
+        let text = this.m_props.text;
+        if (this.m_props.multiline && !(text instanceof tools_1.HtmlString)) {
+            text = new tools_1.HtmlString(text.replace(/\n/g, '<br/>'));
+        }
+        if (!props.icon) {
+            this.setContent(text);
+        }
+        else {
+            this.setProp('tag', 'span');
+            this.addClass('@hlayout');
+            this.setContent([
+                new icon_1.Icon({ icon: props.icon }),
+                new component_1.Component({ content: text, ref: 'text' })
+            ]);
+        }
+        this.addClass(props.align ?? 'left');
+    }
+    /**
+     * change the displayed text
+     * @param text - new text
+     */
+    set text(txt) {
+        let props = this.m_props;
+        if (props.text !== txt) {
+            props.text = txt;
+            let text = this.m_props.text;
+            if (this.m_props.multiline && !(text instanceof tools_1.HtmlString)) {
+                text = new tools_1.HtmlString(text.replace('/\n/g', '<br/>'));
+            }
+            if (this.dom) {
+                let comp = this;
+                if (this.m_props.icon) {
+                    comp = this.itemWithRef('text');
+                }
+                comp.setContent(text);
+            }
+        }
+    }
+    /**
+     *
+     */
+    get text() {
+        return this.m_props.text;
+    }
+}
+exports.Label = Label;

package/lib/layout.d.ts

@@ -0,0 +1,77 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+ * @file layout.ts
+ * @author Etienne Cochard
+ * @license
+ * Copyright (c) 2019-2021 R-libre ingenierie
+ *
+ *	This program is free software; you can redistribute it and/or modify
+ *	it under the terms of the GNU General Public License as published by
+ *	the Free Software Foundation; either version 3 of the License, or
+ *	(at your option) any later version.
+ *
+ *	This program is distributed in the hope that it will be useful,
+ *	but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *	GNU General Public License for more details.
+ *
+ *	You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>..
+ */
+import { Component, CProps, ComponentContent, Container, ContainerProps, ContainerEventMap } from './component';
+export declare class AbsLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
+}
+export declare class HLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
+}
+export declare class VLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
+}
+interface AutoLayoutProps extends CProps {
+    defaultLayout: 'horizontal' | 'vertical';
+    switchSize: number;
+}
+export declare class AutoLayout extends Container<AutoLayoutProps> {
+    constructor(props: AutoLayoutProps);
+    componentCreated(): void;
+    private _updateLayout;
+}
+export interface GridLayoutProps extends ContainerProps {
+    colSizes?: string;
+    rowSizes?: string;
+    colGap?: number;
+    template?: string[];
+}
+export declare class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Container<P> {
+    constructor(props: GridLayoutProps);
+    /** @ignore */
+    render(): void;
+}
+export interface TableLayoutProps extends CProps {
+    rows: number;
+    columns: number;
+}
+export declare class TableLayout extends Container<TableLayoutProps> {
+    private m_cells;
+    constructor(props: TableLayoutProps);
+    private _getCell;
+    private _setCell;
+    setCell(row: number, col: number, item: ComponentContent): void;
+    merge(row: number, col: number, rowCount: number, colCount: number): void;
+    setCellWidth(row: number, col: number, width?: number): void;
+    setCellHeight(row: number, col: number, height?: number): void;
+    setCellClass(row: number, col: number, cls: string): void;
+    setColClass(col: any, cls: any): void;
+    setRowClass(row: any, cls: any): void;
+    getCell(row: any, col: any): ComponentContent;
+    render(): void;
+}
+interface ScrollViewProps extends CProps {
+}
+export declare class ScrollView extends Component<ScrollViewProps> {
+    constructor(props: ScrollViewProps);
+    setContent(content: ComponentContent): void;
+}
+export {};