x4js 1.4.2

package/lib/layout.js

@@ -0,0 +1,261 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+ * @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, 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.setProp('tag', '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);
+        }
+    }
+}

package/lib/link.d.ts

@@ -0,0 +1,46 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file link.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, HtmlString } from './component';
+import { EvClick, EventCallback } from './x4_events';
+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/link.js

@@ -0,0 +1,55 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file link.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, isHtmlString, html } from './component';
+import { EvClick } from './x4_events';
+/**
+ * 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.setAttribute('tabindex', 0);
+        this.setProp('tag', 'a');
+        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/listview.d.ts

@@ -0,0 +1,173 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file listview.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 { Container, Component, CProps, 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 "./x4_events";
+/**
+ * item definition
+ */
+export declare class 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 CProps<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<T extends ListViewProps = ListViewProps, E extends ListViewEventMap = ListViewEventMap> extends VLayout<T, E> {
+    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: T);
+    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;
+    private _handleKey;
+    /** @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(): ListViewItem;
+    set selection(id: ListViewItem);
+    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[]);
+    private _handleClick;
+    show(modal?: boolean): void;
+    hide(): void;
+    close(): void;
+    get selection(): any;
+    set selection(itemId: any);
+}
+export {};