x4js 1.4.51 → 1.4.53

package/lib/esm/tabbar.js

@@ -0,0 +1,107 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabbar.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 } from './component';
+import { Button } from './button';
+import { EvChange } from './x4events';
+export class TabBar extends Container {
+    m_pages;
+    m_curPage;
+    constructor(props) {
+        super(props);
+        this.m_pages = [];
+        this.m_curPage = null;
+        this.mapPropEvents(props, 'change');
+        if (props.vertical) {
+            this.addClass('@vlayout');
+        }
+        else {
+            this.addClass('@hlayout');
+        }
+        this.m_props.pages?.forEach(p => this.addPage(p));
+    }
+    componentCreated() {
+        if (this.m_props.default) {
+            this.select(this.m_props.default, true);
+        }
+    }
+    addPage(page) {
+        this.m_pages.push({ ...page });
+        this._updateContent();
+    }
+    render() {
+        let buttons = [];
+        this.m_pages.forEach(p => {
+            p.btn = new Button({ cls: p === this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p, true) });
+            buttons.push(p.btn);
+        });
+        this.setContent(buttons);
+    }
+    select(id, notify = false) {
+        if (!id) {
+            this._select(null, notify);
+            return true;
+        }
+        else {
+            let page = this.m_pages.find(x => x.id === id);
+            if (page) {
+                this._select(page, notify);
+                return true;
+            }
+            return false;
+        }
+    }
+    _select(p, notify) {
+        if (this.m_curPage == p) {
+            return;
+        }
+        if (!this.dom) {
+            this.m_props.default = p.id;
+            return;
+        }
+        if (this.m_curPage) {
+            this.m_curPage.btn.removeClass('selected');
+            if (this.m_curPage.page) {
+                this.m_curPage.page.hide();
+            }
+        }
+        this.m_curPage = p;
+        if (notify) {
+            this.signal('change', EvChange(p ? p.id : null));
+        }
+        if (this.m_curPage) {
+            this.m_curPage.btn.addClass('selected');
+            if (this.m_curPage.page) {
+                this.m_curPage.page.show();
+            }
+        }
+    }
+    get selection() {
+        return this.m_curPage?.page;
+    }
+}

package/lib/esm/tabview.js

@@ -0,0 +1,83 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file tabview.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 { HLayout } from './layout';
+import { Button } from './button';
+import { CardView } from './cardview';
+/**
+ * Standard TabView class
+ */
+export class TabView extends CardView {
+    m_tab_selector;
+    m_menu;
+    constructor(props) {
+        super(props);
+        this.m_tab_selector = props.tab_selector ? true : false;
+        this.m_menu = props.menu;
+        this.addClass('@vlayout');
+    }
+    /** @ignore */
+    render() {
+        let tabs = [];
+        let pages = [];
+        if (this.m_menu) {
+            this.m_menu.addClass('@button @tab-btn');
+            this.m_menu.removeClass('@menu-item');
+            tabs.push(this.m_menu);
+        }
+        this.m_cards.forEach((p) => {
+            tabs.push(p.selector);
+            if (!(p.page instanceof Function)) {
+                pages.push(p.page);
+            }
+        });
+        if (this.m_tab_selector) {
+            pages.unshift(new HLayout({
+                cls: '@tab-switch',
+                content: tabs
+            }));
+        }
+        this.setContent(pages);
+    }
+    _updateSelector() {
+    }
+    _prepareSelector(card) {
+        return new Button({
+            cls: '@tab-btn',
+            text: card.title,
+            icon: card.icon,
+            click: () => { this.switchTo(card.name); }
+        });
+    }
+    _preparePage(page) {
+        super._preparePage(page);
+        if (!page.dom) {
+            this.appendChild(page);
+        }
+    }
+}

package/lib/esm/textarea.js

@@ -0,0 +1,123 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textarea.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 } from './component';
+import { EvChange } from './x4events';
+import { asap } from './tools';
+export class TextArea extends Component {
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+    }
+    /** @ignore */
+    render(props) {
+        props.text = props.text ?? '';
+        this.setAttribute('tabindex', props.tabIndex ?? 0);
+        if (props.spellcheck === false) {
+            this.setAttribute('spellcheck', 'false');
+        }
+        if (props.readOnly !== undefined) {
+            this.setAttribute('readonly', props.readOnly);
+        }
+        if (props.rows) {
+            this.setAttribute('rows', props.rows);
+        }
+        if (props.placeHolder) {
+            this.setAttribute('placeholder', props.placeHolder);
+        }
+        if (props.autoFocus) {
+            this.setAttribute('autofocus', props.autoFocus);
+        }
+        if (props.name) {
+            this.setAttribute('name', props.name);
+        }
+        if (props.autoGrow) {
+            this.m_props.autoGrow = true;
+            this.setAttribute('rows', this._calcHeight(props.text));
+            this.setDomEvent('keydown', () => {
+                asap(() => this._updateHeight());
+            });
+        }
+        // avoid going to next element on enter
+        this.setDomEvent('keydown', (e) => {
+            e.stopPropagation();
+        });
+        this.setTag('textarea');
+        this.setDomEvent('input', () => this._change());
+    }
+    _change() {
+        this.emit('change', EvChange(this.value));
+    }
+    componentCreated() {
+        this.value = this.m_props.text;
+    }
+    get value() {
+        if (this.dom) {
+            return this.dom.value;
+        }
+        return this.m_props.text;
+    }
+    set value(t) {
+        this.m_props.text = t ?? '';
+        if (this.dom) {
+            this.dom.value = this.m_props.text;
+            if (this.m_props.autoGrow) {
+                this.setAttribute('rows', this._calcHeight(this.m_props.text));
+            }
+        }
+    }
+    _calcHeight(text) {
+        return 1 + (text.match(/\n/g) || []).length;
+    }
+    _updateHeight() {
+        const text = this.value;
+        const lines = this._calcHeight(text);
+        if (this.getData('lines') != lines) {
+            this.setAttribute('rows', lines);
+            this.setData('lines', lines);
+        }
+    }
+    /**
+     * insert text at cursor position
+     */
+    insertText(text) {
+        if (this.dom) {
+            let dom = this.dom;
+            let start = dom.selectionStart;
+            dom.setRangeText(text);
+            dom.selectionStart = start;
+            dom.selectionEnd = start + text.length;
+        }
+    }
+    getStoreValue() {
+        return this.value;
+    }
+    setStoreValue(value) {
+        this.value = value;
+    }
+}