x4js 1.4.52 → 1.5.0

package/lib/esm/layout.d.ts

@@ -0,0 +1,87 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file layout.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 { 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 declare class Masonry extends Container {
+    constructor(props: any);
+    resizeItem(item: Component): void;
+    resizeAllItems(): void;
+    addItem(itm: Component): void;
+}
+export {};

package/lib/esm/layout.js

@@ -0,0 +1,310 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file layout.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 { Component, Container } from './component';
+import { isArray } from './tools';
+// ============================================================================
+// [ABSLAYOUT]
+// ============================================================================
+export class AbsLayout extends Container {
+}
+// ============================================================================
+// [HLAYOUT]
+// ============================================================================
+export class HLayout extends Container {
+}
+// ============================================================================
+// [VLAYOUT]
+// ============================================================================
+export class VLayout extends Container {
+}
+export class AutoLayout extends Container {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('sizechange', () => this._updateLayout());
+    }
+    componentCreated() {
+        super.componentCreated();
+        this._updateLayout();
+    }
+    _updateLayout() {
+        let horz = this.m_props.defaultLayout == 'horizontal' ? true : false;
+        if (this.m_props.switchSize <= 0 && window.screen.height > window.screen.width) {
+            horz = !horz;
+        }
+        else {
+            let rc = this.getBoundingRect();
+            if ((horz && rc.width < this.m_props.switchSize) || (!horz && rc.height < this.m_props.switchSize)) {
+                horz = !horz;
+            }
+        }
+        if (horz) {
+            this.removeClass('@vlayout');
+            this.addClass('@hlayout');
+        }
+        else {
+            this.addClass('@vlayout');
+            this.removeClass('@hlayout');
+        }
+    }
+}
+export class GridLayout extends Container {
+    constructor(props) {
+        /// @ts-ignore
+        // Argument of type 'GridLayoutProps' is not assignable to parameter of type 'P'.
+        // 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
+        super(props);
+    }
+    /** @ignore */
+    render() {
+        if (this.m_props.colSizes) {
+            this.setStyleValue('grid-template-columns', this.m_props.colSizes);
+        }
+        if (this.m_props.rowSizes) {
+            this.setStyleValue('grid-template-rows', this.m_props.rowSizes);
+        }
+        if (this.m_props.colGap) {
+            this.setStyleValue('grid-gap', this.m_props.colGap);
+        }
+        if (this.m_props.template) {
+            this.setStyleValue('grid-template-areas', this.m_props.template.join('\n'));
+        }
+    }
+}
+export class TableLayout extends Container {
+    m_cells;
+    constructor(props) {
+        super(props);
+        this.setTag('table');
+        this.m_cells = new Map();
+    }
+    _getCell(row, col, create = true) {
+        let idx = _mkid(row, col);
+        return this.m_cells.get(idx) ?? (create ? { item: undefined } : null);
+    }
+    _setCell(row, col, cell, update = false) {
+        let idx = _mkid(row, col);
+        this.m_cells.set(idx, cell);
+        if (this.dom && cell.item && update) {
+            if (cell.item instanceof Component) {
+                cell.item.update();
+            }
+            else {
+                this.enumChilds((c) => {
+                    let crow = c.getData('row');
+                    if (crow == row) {
+                        let ccol = c.getData('col');
+                        if (ccol == col) {
+                            c.setContent(cell.item);
+                            c.update();
+                            return true;
+                        }
+                    }
+                });
+            }
+        }
+    }
+    setCell(row, col, item) {
+        let cell = this._getCell(row, col);
+        cell.item = item;
+        this._setCell(row, col, cell, true);
+    }
+    merge(row, col, rowCount, colCount) {
+        let cell = this._getCell(row, col);
+        cell.rowSpan = rowCount;
+        cell.colSpan = colCount;
+        this._setCell(row, col, cell);
+    }
+    setCellWidth(row, col, width) {
+        let cell = this._getCell(row, col);
+        cell.width = width;
+        this._setCell(row, col, cell);
+    }
+    setCellHeight(row, col, height) {
+        let cell = this._getCell(row, col);
+        cell.height = height;
+        this._setCell(row, col, cell);
+    }
+    setCellClass(row, col, cls) {
+        let cell = this._getCell(row, col);
+        cell.cls = cls;
+        this._setCell(row, col, cell);
+    }
+    setColClass(col, cls) {
+        let cell = this._getCell(-1, col);
+        cell.cls = cls;
+        this._setCell(-1, col, cell);
+    }
+    setRowClass(row, cls) {
+        let cell = this._getCell(row, 999);
+        cell.cls = cls;
+        this._setCell(row, 999, cell);
+    }
+    getCell(row, col) {
+        let cell = this._getCell(row, col);
+        return cell?.item;
+    }
+    render() {
+        let rows = [];
+        let skip = [];
+        for (let r = 0; r < this.m_props.rows; r++) {
+            let cols = [];
+            for (let c = 0; c < this.m_props.columns; c++) {
+                let idx = _mkid(r, c);
+                if (skip.indexOf(idx) >= 0) {
+                    continue;
+                }
+                let cell = this.m_cells.get(idx);
+                let cdata = this.m_cells.get(_mkid(-1, c));
+                let cls = '';
+                if (cell && cell.cls) {
+                    cls = cell.cls;
+                }
+                if (cdata && cdata.cls) {
+                    cls += ' ' + cdata.cls;
+                }
+                let cc = new Component({
+                    tag: 'td',
+                    content: cell?.item,
+                    width: cell?.width,
+                    height: cell?.height,
+                    data: { row: r, col: c },
+                    cls
+                });
+                if (cell) {
+                    let rs = cell.rowSpan ?? 0, cs = cell.colSpan ?? 0;
+                    if (rs > 0) {
+                        cc.setAttribute('rowspan', rs + 1);
+                    }
+                    if (cs > 0) {
+                        cc.setAttribute('colspan', cs + 1);
+                    }
+                    if (rs || cs) {
+                        for (let sr = 0; sr <= rs; sr++) {
+                            for (let sc = 0; sc <= cs; sc++) {
+                                skip.push(_mkid(sr + r, sc + c));
+                            }
+                        }
+                    }
+                }
+                cols.push(cc);
+            }
+            let rdata = this._getCell(r, 999, false);
+            let rr = new Component({
+                tag: 'tr',
+                data: { row: r },
+                content: cols,
+                cls: rdata?.cls
+            });
+            rows.push(rr);
+        }
+        this.setContent(rows);
+    }
+}
+/**
+ * @ignore
+ */
+function _mkid(row, col) {
+    return row * 1000 + col;
+}
+/**
+ * @ignore
+ */
+function _getid(key) {
+    return {
+        row: Math.floor(key / 1000) | 0,
+        col: (key % 1000) | 0
+    };
+}
+export class ScrollView extends Component {
+    constructor(props) {
+        super(props);
+        this.setContent(props.content);
+    }
+    setContent(content) {
+        if (!content) {
+            super.setContent(null);
+        }
+        else {
+            let container;
+            if (isArray(content)) {
+                container = new VLayout({ content });
+            }
+            else {
+                container = content;
+            }
+            container.addClass('@scroll-container');
+            super.setContent(container);
+        }
+    }
+}
+// :: MASONERY ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+// from a nice article of Andy Barefoot
+//	https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb
+export class Masonry extends Container {
+    constructor(props) {
+        const items = props.items;
+        props.items = undefined;
+        super(props);
+        this.setDomEvent('sizechange', () => {
+            this.resizeAllItems();
+        });
+        if (items) {
+            items.forEach(i => {
+                this.addItem(i);
+            });
+        }
+    }
+    resizeItem(item) {
+        const style = this.getComputedStyle();
+        const rowHeight = style.parse('grid-auto-rows');
+        const rowGap = style.parse('grid-row-gap');
+        let content = item.queryItem('.content');
+        if (!content) {
+            content = item;
+        }
+        if (content && (rowHeight + rowGap)) {
+            const rc = content.getBoundingRect();
+            const rowSpan = Math.ceil((rc.height + rowGap) / (rowHeight + rowGap));
+            item.setStyleValue('gridRowEnd', "span " + rowSpan);
+        }
+    }
+    resizeAllItems() {
+        this.queryAll(".item", (itm) => {
+            ;
+            this.resizeItem(itm);
+        });
+    }
+    addItem(itm) {
+        itm.addClass('content');
+        this.appendChild(new Container({
+            cls: 'item',
+            content: itm
+        }));
+    }
+}

package/lib/esm/link.d.ts

@@ -0,0 +1,50 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file link.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 { Component, CProps, CEventMap, HtmlString } from './component';
+import { EvClick, EventCallback } from './x4events';
+interface LinkEventMap extends CEventMap {
+    click: EvClick;
+}
+export interface LinkProps extends CProps<LinkEventMap> {
+    text?: string | HtmlString;
+    href?: string;
+    target?: string;
+    click?: EventCallback<EvClick>;
+}
+/**
+ * Standard Link
+ */
+export declare class Link extends Component<LinkProps, LinkEventMap> {
+    constructor(props?: LinkProps);
+    private _handleClick;
+    /** @ignore */
+    render(props: LinkProps): void;
+    set text(text: string | HtmlString);
+}
+export {};

package/lib/esm/link.js

@@ -0,0 +1,59 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file link.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 { Component, isHtmlString, html } from './component';
+import { EvClick } from './x4events';
+/**
+ * Standard Link
+ */
+export class Link extends Component {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('click', () => this._handleClick());
+        this.mapPropEvents(props, 'click');
+    }
+    _handleClick() {
+        this.emit('click', EvClick());
+    }
+    /** @ignore */
+    render(props) {
+        let text = props.text ?? '';
+        let href = props.href ?? '#';
+        this.setTag('a');
+        this.setAttribute('tabindex', 0);
+        this.setAttribute('href', href);
+        this.setAttribute('target', props.target);
+        if (text) {
+            this.setContent(isHtmlString(text) ? text : html `<span>${text}</span>`);
+        }
+    }
+    set text(text) {
+        this.m_props.text = text;
+        this.update();
+    }
+}

package/lib/esm/listview.d.ts

@@ -0,0 +1,178 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file listview.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 { Container, Component, ContainerProps, ContainerEventMap, EvDblClick } from './component';
+import { IconID } from './icon';
+import { VLayout } from './layout';
+import { Popup, PopupEventMap, PopupProps } from './popup';
+import { HtmlString } from './tools';
+import { EvContextMenu, EvSelectionChange, EvClick, EventCallback, BasicEvent } from "./x4events";
+/**
+ * item definition
+ */
+export interface ListViewItem {
+    id: any;
+    text?: string | HtmlString;
+    html?: boolean;
+    icon?: IconID;
+    data?: any;
+}
+/**
+ * callback to render item
+ */
+export interface RenderListItem {
+    (item: ListViewItem): any;
+}
+/**
+ * callback to fill the list
+ */
+export interface PopulateItems {
+    (): ListViewItem[];
+}
+/**
+ * listview can generate these events
+ */
+export interface ListViewEventMap extends ContainerEventMap {
+    click?: EvClick;
+    dblClick?: EvDblClick;
+    contextMenu?: EvContextMenu;
+    selectionChange?: EvSelectionChange;
+    cancel?: EvCancel;
+}
+/**
+ * listview properties
+ */
+export interface ListViewProps<E extends ListViewEventMap = ListViewEventMap> extends ContainerProps<E> {
+    items?: ListViewItem[];
+    populate?: PopulateItems;
+    gadgets?: Component[];
+    virtual?: boolean;
+    itemHeight?: number;
+    renderItem?: RenderListItem;
+    click?: EventCallback<EvClick>;
+    dblClick?: EventCallback<EvDblClick>;
+    contextMenu?: EventCallback<EvContextMenu>;
+    selectionChange?: EventCallback<EvSelectionChange>;
+    cancel?: EventCallback<EvCancel>;
+}
+/**
+ * Standard listview class
+ */
+export declare class ListView extends VLayout<ListViewProps, ListViewEventMap> {
+    protected m_selection: {
+        item: ListViewItem;
+        citem: Component;
+    };
+    protected m_defer_sel: any;
+    protected m_container: Container;
+    protected m_view: Container;
+    protected m_topIndex: number;
+    protected m_itemHeight: number;
+    protected m_cache: Map<number, Component>;
+    constructor(props: ListViewProps);
+    componentCreated(): void;
+    render(props: ListViewProps): void;
+    /**
+     * change the list of item displayed
+     * @param items - new array of items
+     * @deprecated
+     */
+    set items(items: ListViewItem[]);
+    get items(): ListViewItem[];
+    /**
+     * change the list of item displayed
+     * @param items - new array of items
+     */
+    setItems(items: ListViewItem[], keepSel?: boolean): void;
+    handleKey(ev: KeyboardEvent): void;
+    /** @ignore */
+    private _buildContent;
+    /**
+     *
+     */
+    private _updateScroll;
+    private _buildItems;
+    /** @ignore
+     * default rendering of an item
+     */
+    private _renderItem;
+    onRenderItem(item: ListViewItem): Component;
+    /** @ignore */
+    private _handleClick;
+    /** @ignore */
+    private _handleCtxMenu;
+    /**
+     * @ignore
+     * called when an item is selected by mouse
+     */
+    protected _selectItem(item: ListViewItem, citem: Component, notify?: boolean): void;
+    /**
+     * return the current selection or null
+     */
+    get selection(): any;
+    set selection(id: any);
+    private _findItemWithId;
+    /**
+     * append or prepend a new item
+     * @param item
+     * @param prepend
+     * @param select
+     */
+    appendItem(item: ListViewItem, prepend?: boolean, select?: boolean): void;
+    /**
+     * update an item
+     */
+    updateItem(id: any, item: ListViewItem): void;
+}
+/**
+ * Cancel Event
+ */
+export interface EvCancel extends BasicEvent {
+}
+export declare function EvCancel(context?: any): EvCancel;
+interface PopupListViewEventMap extends PopupEventMap {
+    cancel: EvCancel;
+}
+interface PopupListViewProps extends PopupProps<PopupListViewEventMap> {
+}
+/**
+ *
+ */
+export declare class PopupListView extends Popup<PopupListViewProps, PopupListViewEventMap> {
+    m_list: ListView;
+    constructor(props: ListViewProps);
+    set items(items: ListViewItem[]);
+    handleKey(ev: KeyboardEvent): void;
+    private _handleClick;
+    show(modal?: boolean): void;
+    hide(): void;
+    close(): void;
+    get selection(): any;
+    set selection(itemId: any);
+}
+export {};