x4js 1.4.52 → 1.4.53

package/lib/esm/radiobtn.js

@@ -0,0 +1,136 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file radiobtn.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 { x4document } from './x4dom';
+import { Component } from './component';
+import { EvChange } from './x4events';
+import { Input } from './input';
+import { Label } from './label';
+/**
+ * Standard RadioBtn
+ */
+export class RadioBtn extends Component {
+    m_ui_input; // todo: remove that / use ref
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+    }
+    /** @ignore */
+    render(props) {
+        let text = props.text ?? '';
+        let name = props.name ?? props.group;
+        let labelWidth = props.labelWidth ?? -1;
+        let checked = props.checked ?? false;
+        let align = props.align ?? 'left';
+        let value = props.value;
+        let icon = props.icon;
+        this.setTag('label');
+        this.addClass('@hlayout');
+        this.addClass(align);
+        this._setTabIndex(props.tabIndex);
+        if (checked) {
+            this.addClass('checked');
+        }
+        this.setContent([
+            this.m_ui_input = new Input({
+                type: 'radio',
+                name: name,
+                tabIndex: props.tabIndex,
+                value: value,
+                attrs: {
+                    checked: checked ? '' : undefined
+                },
+                dom_events: {
+                    change: () => this._change(),
+                    focus: () => this.m_ui_input.focus(),
+                }
+            }),
+            new Label({
+                ref: 'label',
+                icon: icon,
+                text: text,
+                width: labelWidth === 'flex' ? undefined : labelWidth,
+                flex: labelWidth === 'flex' ? 1 : undefined,
+                style: {
+                    order: align == 'right' ? -1 : undefined,
+                },
+            })
+        ]);
+    }
+    /**
+     * check state changed
+     */
+    _change() {
+        let props = this.m_props;
+        let query = '.x-input[name=' + props.name + ']';
+        let nlist = x4document.querySelectorAll(query); //todo: document ?
+        nlist.forEach((dom) => {
+            let radio = Component.getElement(dom, RadioBtn);
+            radio.removeClass('checked');
+        });
+        let dom = this.m_ui_input.dom;
+        this.setClass('checked', dom.checked);
+        this.emit('change', EvChange(true));
+    }
+    /**
+     * @return the checked value
+     */
+    get check() {
+        if (this.m_ui_input) {
+            return this.m_ui_input.dom.checked;
+        }
+        return this.m_props.checked;
+    }
+    /**
+     * change the checked value
+     * @param {boolean} ck new checked value
+     */
+    set check(ck) {
+        let dom = this.m_ui_input.dom;
+        if (ck) {
+            //this.addClass( 'checked' );
+            if (dom) {
+                dom.checked = true;
+            }
+            this.m_props.checked = true;
+        }
+        else {
+            //this.removeClass( 'checked' );
+            if (dom) {
+                dom.checked = false;
+            }
+            this.m_props.checked = false;
+        }
+    }
+    get text() {
+        return this.itemWithRef('label').text;
+    }
+    set text(text) {
+        this.itemWithRef('label').text = text;
+    }
+}

package/lib/esm/rating.js

@@ -0,0 +1,97 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file rating.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 { HLayout } from './layout';
+import { Input } from './input';
+import { EvChange } from './x4events';
+export class Rating extends HLayout {
+    m_els;
+    m_input;
+    constructor(props) {
+        super(props);
+        props.steps = props.steps ?? 5;
+    }
+    render(props) {
+        let shape = props.shape ?? 'star';
+        let value = props.value ?? 0;
+        this.m_input = new Input({
+            cls: '@hidden',
+            name: props.name,
+            value: '' + value
+        });
+        this.addClass(shape);
+        this.setDomEvent('click', (e) => this._onclick(e));
+        this.m_els = [];
+        for (let i = 0; i < props.steps; i++) {
+            let cls = 'item';
+            if (i + 1 <= value) {
+                cls += ' checked';
+            }
+            let c = new Component({
+                tag: 'option',
+                cls,
+                data: { value: i + 1 }
+            });
+            this.m_els.push(c);
+        }
+        this.m_els.push(this.m_input);
+        this.setContent(this.m_els);
+    }
+    getValue() {
+        return this.m_props.value ?? 0;
+    }
+    set value(v) {
+        this.m_props.value = v;
+        for (let c = 0; c < this.m_props.steps; c++) {
+            this.m_els[c].setClass('checked', this.m_els[c].getData('value') <= v);
+        }
+        this.m_input.value = '' + this.m_props.value;
+    }
+    set steps(n) {
+        this.m_props.steps = n;
+        this.update();
+    }
+    set shape(shape) {
+        this.removeClass(this.m_props.shape);
+        this.m_props.shape = shape;
+        this.addClass(this.m_props.shape);
+    }
+    _onclick(ev) {
+        let on = true;
+        for (let el = this.dom.firstChild; el; el = el.nextSibling) {
+            let comp = Component.getElement(el);
+            comp.setClass('checked', on);
+            if (el == ev.target) {
+                this.m_input.value = comp.getData('value');
+                on = false;
+            }
+        }
+        this.emit('change', EvChange(this.m_props.value));
+    }
+}

package/lib/{request.js → esm/request.js}

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -27,8 +26,6 @@
 * 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.ajax = exports.ajaxAsText = exports.ajaxAsJSON = exports.ajaxRequest = void 0;
 /**
  * TODO: use fetch api
  *
@@ -48,9 +45,9 @@ function dump( resp ) {
 getToto( dump );
 
 */
-const tools_1 = require("./tools");
+import { isArray, isLiteralObject, isString, NetworkError } from './tools';
 const DEFAULT_TIMEOUT = 10000;
-function ajaxRequest(cfg) {
+export function ajaxRequest(cfg) {
     let params, url = cfg.url, method = cfg.method || 'GET', formdata = false;
     if (cfg.params instanceof FormData) {
         params = cfg.params;
@@ -145,7 +142,6 @@ function ajaxRequest(cfg) {
         xhr.abort();
     };
 }
-exports.ajaxRequest = ajaxRequest;
 function buildQuery(params, getMethod) {
     if (!params) {
         return '';
@@ -154,7 +150,7 @@ function buildQuery(params, getMethod) {
     for (let key in params) {
         let param = params[key];
         // array
-        if ((0, tools_1.isArray)(param)) {
+        if (isArray(param)) {
             for (let i = 0, n = param.length; i < n; i++) {
                 query.push(encodeURIComponent(key) + '[]=' + encodeURIComponent('' + param[i]));
             }
@@ -175,20 +171,18 @@ function buildQuery(params, getMethod) {
         return result;
     }
 }
-async function ajaxAsJSON(url, init) {
+export async function ajaxAsJSON(url, init) {
     let response = await ajax(url, init, 'application/json');
     return response.json();
 }
-exports.ajaxAsJSON = ajaxAsJSON;
-async function ajaxAsText(url, init) {
+export async function ajaxAsText(url, init) {
     let response = await ajax(url, init, 'text/plain');
     return response.text();
 }
-exports.ajaxAsText = ajaxAsText;
 /**
  * use encodeURIComponent for elements in url
  */
-async function ajax(url, init, type) {
+export async function ajax(url, init, type) {
     let options = {
         method: 'GET',
         headers: {
@@ -200,9 +194,9 @@ async function ajax(url, init, type) {
     }
     if (init) {
         options = { ...options, ...init };
-        if (init.body && !(0, tools_1.isString)(init.body)) {
+        if (init.body && !isString(init.body)) {
             let cvt = false;
-            if ((0, tools_1.isLiteralObject)(init.body)) {
+            if (isLiteralObject(init.body)) {
                 cvt = true;
             }
             else if (!(init.body instanceof Blob) && !(init.body instanceof ArrayBuffer) && !(init.body instanceof FormData) &&
@@ -223,9 +217,8 @@ async function ajax(url, init, type) {
     }
     else {
         if (!response.ok) {
-            throw new tools_1.NetworkError(response);
+            throw new NetworkError(response);
         }
         return response;
     }
 }
-exports.ajax = ajax;

package/lib/esm/router.js

@@ -0,0 +1,136 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file router.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 { x4document } from './x4dom';
+import { EventSource, EvError } from "./x4events";
+function parseRoute(str, loose = false) {
+    if (str instanceof RegExp) {
+        return {
+            keys: null,
+            pattern: str
+        };
+    }
+    const arr = str.split('/');
+    let keys = [];
+    let pattern = '';
+    if (arr[0] == '') {
+        arr.shift();
+    }
+    for (const tmp of arr) {
+        const c = tmp[0];
+        if (c === '*') {
+            keys.push('wild');
+            pattern += '/(.*)';
+        }
+        else if (c === ':') {
+            const o = tmp.indexOf('?', 1);
+            const ext = tmp.indexOf('.', 1);
+            keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
+            pattern += o >= 0 && ext < 0 ? '(?:/([^\/]+?))?' : '/([^\/]+?)';
+            if (ext >= 0) {
+                pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
+            }
+        }
+        else {
+            pattern += '/' + tmp;
+        }
+    }
+    return {
+        keys,
+        pattern: new RegExp(`^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i')
+    };
+}
+export class Router extends EventSource {
+    routes;
+    constructor() {
+        super();
+        this.routes = [];
+        window.addEventListener('popstate', (event) => {
+            const url = x4document.location.pathname;
+            const found = this._find(url);
+            found.handlers.forEach(h => {
+                h(found.params, url);
+            });
+        });
+    }
+    get(uri, handler) {
+        let { keys, pattern } = parseRoute(uri);
+        this.routes.push({ keys, pattern, handler });
+    }
+    init() {
+        this.navigate(window.location.pathname);
+    }
+    navigate(uri, notify = true) {
+        const found = this._find(uri);
+        if (!found || found.handlers.length == 0) {
+            //window.history.pushState({}, '', 'error')
+            console.log('route not found: ' + uri);
+            this.signal("error", EvError(404, "route not found"));
+            return;
+        }
+        window.history.pushState({}, '', uri);
+        if (notify) {
+            found.handlers.forEach(h => {
+                h(found.params, uri);
+            });
+        }
+    }
+    _find(url) {
+        let matches = [];
+        let params = {};
+        let handlers = [];
+        for (const tmp of this.routes) {
+            if (!tmp.keys) {
+                matches = tmp.pattern.exec(url);
+                if (!matches) {
+                    continue;
+                }
+                if (matches['groups']) {
+                    for (const k in matches['groups']) {
+                        params[k] = matches['groups'][k];
+                    }
+                }
+                handlers = [...handlers, tmp.handler];
+            }
+            else if (tmp.keys.length > 0) {
+                matches = tmp.pattern.exec(url);
+                if (matches === null) {
+                    continue;
+                }
+                for (let j = 0; j < tmp.keys.length;) {
+                    params[tmp.keys[j]] = matches[++j];
+                }
+                handlers = [...handlers, tmp.handler];
+            }
+            else if (tmp.pattern.test(url)) {
+                handlers = [...handlers, tmp.handler];
+            }
+        }
+        return { params, handlers };
+    }
+}

package/lib/{settings.js → esm/settings.js}

@@ -1,4 +1,3 @@
-"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -27,9 +26,7 @@
 * 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.Settings = void 0;
-class Settings {
+export class Settings {
     m_data;
     m_name;
     constructor(name) {
@@ -67,4 +64,3 @@ class Settings {
         // console.info('There was an error attempting to read your settings.');
     }
 }
-exports.Settings = Settings;

package/lib/esm/sidebarview.js

@@ -0,0 +1,79 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file sidebarview.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 { Separator } from './component';
+import { HLayout, VLayout } from './layout';
+import { Button } from './button';
+import { CardView } from './cardview';
+/**
+ *
+ */
+export class SideBarView extends CardView {
+    m_sidebar;
+    m_content;
+    constructor(props) {
+        super(props);
+        this.addClass('@hlayout');
+        this.m_sidebar = new VLayout({
+            cls: '@side-bar',
+            width: props.bar_width ?? undefined,
+        });
+        this.m_content = new HLayout({ flex: 1, cls: '@tab-container' });
+    }
+    /** @ignore */
+    render() {
+        let tabs = [];
+        this.m_cards.forEach((p) => {
+            tabs.push(p.selector);
+        });
+        this.m_sidebar.setContent(new VLayout({
+            flex: 1,
+            cls: 'content',
+            content: tabs
+        }));
+        this.setContent([
+            this.m_sidebar,
+            this.m_props.bar_sizable ? new Separator({ orientation: "horizontal", sizing: "before" }) : undefined,
+            this.m_content
+        ]);
+    }
+    _prepareSelector(card) {
+        return new Button({
+            text: card.title,
+            icon: card.icon,
+            tooltip: card.title,
+            click: () => { this.switchTo(card.name); }
+        });
+    }
+    _preparePage(page) {
+        super._preparePage(page);
+        if (!page.dom) {
+            this.m_content.appendChild(page);
+        }
+    }
+}