x4js 1.4.2

package/lib/textarea.js

@@ -0,0 +1,119 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textarea.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 } from './component';
+import { EvChange } from './x4_events';
+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.setProp('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.setDomEvent('input', () => this._change());
+        this.setProp('tag', 'textarea');
+    }
+    _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;
+    }
+}

package/lib/textedit.d.ts

@@ -0,0 +1,118 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textedit.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, EvFocus, HtmlString } from './component';
+import { Input, InputProps, InputEventMap } from './input';
+import { IconID } from './icon';
+import { EvClick, EvChange, EventCallback } from './x4_events';
+declare type ValidationFunction = (value: string) => string;
+interface TextEditEventMap extends InputEventMap {
+    click: EvClick;
+    change: EvChange;
+    focus: EvFocus;
+}
+export interface TextEditProps extends InputProps<TextEditEventMap> {
+    label?: string | HtmlString;
+    labelWidth?: number;
+    labelAlign?: 'left' | 'right' | 'top';
+    required?: boolean;
+    spellcheck?: boolean;
+    icon?: IconID;
+    pattern?: string;
+    uppercase?: boolean;
+    format?: string | 'native';
+    gadgets?: Component[];
+    validator?: ValidationFunction;
+    change?: EventCallback<EvChange>;
+    click?: EventCallback<EvClick>;
+    focus?: EventCallback<EvFocus>;
+}
+/**
+ * TextEdit is a single line editor, it can have a label and an error descriptor.
+ */
+export declare class TextEdit<T extends TextEditProps = TextEditProps> extends Component<TextEditProps, TextEditEventMap> {
+    private m_cal_popup;
+    protected m_ui_input: Input;
+    private m_error_tip;
+    constructor(props: TextEditProps);
+    componentCreated(): void;
+    componentDisposed(): void;
+    focus(): void;
+    /** @ignore */
+    render(props: TextEditProps): void;
+    enable(ena?: boolean): void;
+    disable(): void;
+    private _btnClick;
+    /**
+     * select the value format for input/output on textedit of type date
+     * cf. formatIntlDate / parseIntlDate
+     * @param fmt
+     */
+    setDateStoreFormat(fmt: string): void;
+    setStoreValue(value: any): void;
+    getStoreValue(): any;
+    private _date_get_hook;
+    private _date_set_hook;
+    showError(text: string): void;
+    clearError(): void;
+    get value(): string;
+    set value(value: string);
+    /**
+     * select all the text
+     */
+    selectAll(): void;
+    select(start: number, length?: number): void;
+    getSelection(): {
+        start: number;
+        length: number;
+    };
+    set readOnly(ro: boolean);
+    get label(): string | HtmlString;
+    set label(text: string | HtmlString);
+    /**
+     * content changed
+     * todo: should move into Input
+     */
+    private _change;
+    /**
+     * getting focus
+     */
+    private _focus;
+    /**
+     * loosing focus
+     * @param value
+     */
+    private _blur;
+    /**
+     * todo: should move into Input
+     * @returns
+     */
+    validate(): boolean;
+    private _validate;
+    _date_validator(value: string): string;
+    private _showDatePicker;
+    get input(): Input;
+    get type(): import("./input").EditType;
+}
+export {};

package/lib/textedit.js

@@ -0,0 +1,406 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file textedit.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, EvFocus } from './component';
+import { Input } from './input';
+import { Button } from './button';
+import { HLayout } from './layout';
+import { Label } from './label';
+import { PopupCalendar } from './calendar';
+import { sprintf, parseIntlDate, formatIntlDate } from './tools';
+import { Tooltip } from './tooltips';
+import { EvClick, EvChange } from './x4_events';
+import { _tr } from './i18n';
+/** @ignore */
+const reEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+/**
+ * TextEdit is a single line editor, it can have a label and an error descriptor.
+ */
+export class TextEdit extends Component {
+    m_cal_popup;
+    m_ui_input;
+    m_error_tip;
+    constructor(props) {
+        super(props);
+        this.addClass('@hlayout');
+        this.mapPropEvents(props, 'change', 'click', 'focus');
+    }
+    componentCreated() {
+        super.componentCreated();
+        if (this.m_props.autoFocus) {
+            this.focus();
+        }
+    }
+    componentDisposed() {
+        if (this.m_error_tip) {
+            this.m_error_tip.dispose();
+        }
+        super.componentDisposed();
+    }
+    focus() {
+        this.m_ui_input.focus();
+    }
+    /** @ignore */
+    render(props) {
+        let eprops = {
+            flex: 1,
+            dom_events: {
+                focus: () => this._focus(),
+                blur: () => this._blur(),
+                input: () => this._change()
+            },
+            value: props.value,
+            name: props.name,
+            type: props.type,
+            placeHolder: props.placeHolder,
+            autoFocus: props.autoFocus,
+            readOnly: props.readOnly,
+            value_hook: props.value_hook,
+            uppercase: props.uppercase,
+            spellcheck: props.spellcheck,
+            tabIndex: props.tabIndex === undefined ? true : props.tabIndex,
+            attrs: props.attrs,
+            min: props.min,
+            max: props.max,
+        };
+        // date is handled manually with popupcalendar
+        if (props.type == 'date') {
+            props.format = props.format ?? 'Y-M-D';
+            eprops.type = 'text';
+            let def_hook = {
+                get: () => this._date_get_hook(),
+                set: (e) => this._date_set_hook(e)
+            };
+            eprops.value_hook = props.value_hook ?? def_hook;
+        }
+        this.m_ui_input = new Input(eprops);
+        //	button
+        let button = undefined;
+        if (props.icon) {
+            button = new Button({
+                icon: props.icon,
+                click: () => this._btnClick(),
+                tabIndex: false
+            });
+        }
+        else if (props.type == 'date') {
+            button = new Button({
+                cls: 'gadget',
+                icon: 'cls(far fa-calendar-days)',
+                tabIndex: false,
+                click: () => this._showDatePicker(button)
+            });
+            if (!props.validator) {
+                props.validator = this._date_validator;
+            }
+        }
+        let ag = props.gadgets ?? [];
+        ag.forEach(b => {
+            b.addClass('gadget');
+        });
+        let gadgets = [button, ...ag];
+        this.setClass('@required', props.required);
+        if (props.gadgets && props.gadgets.length) {
+            this.addClass('with-gadgets');
+        }
+        let width = undefined, flex = undefined, labelWidth = props.labelWidth;
+        if (labelWidth > 0) {
+            width = labelWidth;
+        }
+        if (labelWidth < 0) {
+            flex = -labelWidth;
+        }
+        let label = undefined;
+        let labelAlign = props.labelAlign;
+        let top = false;
+        if (props.label) {
+            if (labelAlign == 'top') {
+                labelAlign = 'left';
+                top = true;
+                flex = 1;
+            }
+            label = new Label({
+                ref: 'label',
+                tag: 'label',
+                cls: 'label1' + (props.label ? '' : ' @hidden'),
+                text: props.label ?? '',
+                width,
+                flex,
+                align: labelAlign
+            });
+        }
+        if (top) {
+            this.removeClass('@hlayout');
+            this.addClass('@vlayout vertical');
+            this.setContent([
+                label,
+                new HLayout({ width, content: [this.m_ui_input, ...gadgets] })
+            ]);
+        }
+        else {
+            this.addClass('@hlayout');
+            this.setContent([label, this.m_ui_input, ...gadgets]);
+        }
+    }
+    enable(ena) {
+        if (ena === true) {
+            this.m_ui_input.enable();
+        }
+        super.enable(ena);
+    }
+    disable() {
+        this.m_ui_input.disable();
+        super.disable();
+    }
+    _btnClick() {
+        this.emit('click', EvClick(this.value));
+    }
+    /**
+     * select the value format for input/output on textedit of type date
+     * cf. formatIntlDate / parseIntlDate
+     * @param fmt
+     */
+    setDateStoreFormat(fmt) {
+        this.m_props.format = fmt;
+    }
+    setStoreValue(value) {
+        this.m_ui_input.setStoreValue(value);
+    }
+    getStoreValue() {
+        return this.m_ui_input.getStoreValue();
+    }
+    _date_get_hook() {
+        let date = parseIntlDate(this.value);
+        let props = this.m_props;
+        if (props.format == 'native') {
+            return date;
+        }
+        else {
+            return date ? formatIntlDate(date, props.format) : null;
+        }
+    }
+    _date_set_hook(dte) {
+        let props = this.m_props;
+        if (props.format == 'native') {
+            this.value = formatIntlDate(dte);
+        }
+        else if (dte) {
+            let date = parseIntlDate(dte, props.format);
+            this.value = formatIntlDate(date);
+        }
+        else {
+            this.value = '';
+        }
+    }
+    showError(text) {
+        if (!this.m_error_tip) {
+            this.m_error_tip = new Tooltip({ cls: 'error' });
+            document.body.appendChild(this.m_error_tip._build());
+        }
+        let rc = this.m_ui_input.getBoundingRect();
+        this.m_error_tip.text = text;
+        this.m_error_tip.displayAt(rc.right, rc.top, 'top left');
+        this.addClass('@error');
+    }
+    clearError() {
+        if (this.m_error_tip) {
+            this.m_error_tip.hide();
+            this.removeClass('@error');
+        }
+    }
+    get value() {
+        if (this.m_ui_input) {
+            return this.m_ui_input.value;
+        }
+        else {
+            return this.m_props.value;
+        }
+    }
+    set value(value) {
+        if (this.m_ui_input) {
+            this.m_ui_input.value = value;
+        }
+        else {
+            this.m_props.value = value;
+        }
+    }
+    /**
+     * select all the text
+     */
+    selectAll() {
+        this.m_ui_input.selectAll();
+    }
+    select(start, length = 9999) {
+        this.m_ui_input.select(start, length);
+    }
+    getSelection() {
+        return this.m_ui_input.getSelection();
+    }
+    set readOnly(ro) {
+        this.m_ui_input.readOnly = ro;
+    }
+    get label() {
+        return this.itemWithRef('label')?.text;
+    }
+    set label(text) {
+        this.itemWithRef('label').text = text;
+    }
+    /**
+     * content changed
+     * todo: should move into Input
+     */
+    _change() {
+        let value = this.m_ui_input.value;
+        this.emit('change', EvChange(value));
+    }
+    /**
+     * getting focus
+     */
+    _focus() {
+        this.clearError();
+        this.emit('focus', EvFocus(true));
+    }
+    /**
+     * loosing focus
+     * @param value
+     */
+    _blur() {
+        this._validate(this.m_ui_input.value);
+        this.emit('focus', EvFocus(false));
+    }
+    /**
+     * todo: should move into Input
+     * @returns
+     */
+    validate() {
+        return this._validate(this.value);
+    }
+    _validate(value) {
+        let props = this.m_props;
+        let update = false;
+        if (props.required && value.length == 0) {
+            this.showError(_tr.global.required_field);
+            return false;
+        }
+        if (value != '') {
+            let pattern = this.getAttribute('pattern');
+            if (pattern) {
+                let re = new RegExp(pattern);
+                if (re && !re.test(value)) {
+                    this.showError(_tr.global.invalid_format);
+                    return false;
+                }
+            }
+            if (props.type == 'email') {
+                if (!reEmail.test(value.toLowerCase())) {
+                    this.showError(_tr.global.invalid_email);
+                    return false;
+                }
+            }
+            else if (props.type == 'number') {
+                const v = parseFloat(value);
+                if (isNaN(v)) {
+                    this.showError(_tr.global.invalid_number);
+                    return false;
+                }
+                let min = parseFloat(this.m_ui_input.getAttribute('min'));
+                if (min !== undefined && v < min) {
+                    value = '' + min;
+                    update = true;
+                }
+                let max = parseFloat(this.m_ui_input.getAttribute('max'));
+                if (max !== undefined && v > max) {
+                    value = '' + max;
+                    update = true;
+                }
+            }
+        }
+        if (props.validator) {
+            try {
+                this.value = props.validator(value);
+            }
+            catch (err) {
+                this.showError(err instanceof Error ? err.message : err);
+                return false;
+            }
+        }
+        else if (update) {
+            this.value = value;
+        }
+        return true;
+    }
+    _date_validator(value) {
+        value = value.trim();
+        if (value == '') {
+            return '';
+        }
+        let date;
+        if (value == '@') {
+            date = new Date();
+        }
+        else {
+            date = parseIntlDate(value);
+            if (!date) {
+                throw sprintf(_tr.global.invalid_date, _tr.global.date_format);
+            }
+        }
+        return formatIntlDate(date);
+    }
+    //onKeyDown( e ) {
+    //    if( this.readOnly ) {
+    //        if( this.type=='date' && (e.key==' ' || e.key=='Enter') ) {
+    //            this.showDatePicker( );
+    //            e.stopPropagation( );
+    //            e.preventDefault( );
+    //        }
+    //    }
+    //}
+    //onClick( e ) {
+    //    if( this.readOnly ) {
+    //        if( this.type=='date' ) {
+    //            this.showDatePicker( );
+    //            e.stopPropagation( );
+    //            e.preventDefault( );
+    //        }
+    //    }
+    //}
+    _showDatePicker(btn) {
+        if (!this.m_cal_popup) {
+            this.m_cal_popup = new PopupCalendar({
+                change: (ev) => {
+                    this.value = formatIntlDate(ev.value);
+                    this.m_cal_popup.close();
+                }
+            });
+        }
+        let rc = this.m_ui_input.getBoundingRect();
+        this.m_cal_popup.displayAt(rc.left, rc.bottom, 'top left');
+    }
+    get input() {
+        return this.m_ui_input;
+    }
+    get type() {
+        return this.m_props.type;
+    }
+}

package/lib/texthiliter.d.ts

@@ -0,0 +1,56 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file texthiliter.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/>.
+**/
+/**
+ * idea came from https://www.cdolivet.com/editarea
+ */
+import { Component, CProps, CEventMap } from './component';
+import { EvChange } from './x4_events';
+interface TextHiliterEventMap extends CEventMap {
+    change: EvChange;
+}
+interface TextHiliterProps extends CProps {
+    text: string;
+    kwList?: Set<string>;
+    change?: EvChange;
+}
+export declare class TextHiliter extends Component<TextHiliterProps, TextHiliterEventMap> {
+    private m_text;
+    private m_ed;
+    private m_hi;
+    private m_top;
+    private m_kwList;
+    constructor(props: TextHiliterProps);
+    /** @ignore */
+    render(): void;
+    componentCreated(): void;
+    get value(): string;
+    set value(t: string);
+    private _keydown;
+    private _hiliteText;
+    private _updateScroll;
+    private _escape;
+    private _tokenize;
+}
+export {};