jsl-ui 9.18.3 → 9.19.0

package/lib/components/IntervalComponent.d.ts

@@ -0,0 +1,17 @@
+import { IJSLComponent, JSLRender, IJSLVNode } from "jsl-render";
+export interface IIntervalOptions {
+    interval: number;
+    stopOnError?: boolean;
+    noRefresh?: boolean;
+}
+export declare class IntervalComponent implements IJSLComponent {
+    private fnc;
+    private options;
+    private renderer;
+    constructor(fnc: any, options: IIntervalOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    onInit(render: JSLRender): void;
+    onCreate(node: IJSLVNode): void;
+    onRemove(node: IJSLVNode): void;
+}

package/lib/components/IntervalComponent.js

@@ -0,0 +1,68 @@
+var IntervalComponent = /** @class */ (function () {
+    function IntervalComponent(fnc, options) {
+        this.fnc = fnc;
+        this.options = options;
+    }
+    IntervalComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    IntervalComponent.prototype.render = function () {
+        return { tag: "input", attr: { type: "hidden" } };
+    };
+    IntervalComponent.prototype.onInit = function (render) {
+        this.renderer = render;
+    };
+    IntervalComponent.prototype.onCreate = function (node) {
+        var _this = this;
+        var timeoutRef = node.dom.value;
+        if (timeoutRef && timeoutRef !== "0") {
+            clearTimeout(parseInt(timeoutRef, 10));
+            node.dom.value = "";
+        }
+        var f = function () {
+            var result;
+            try {
+                result = _this.fnc();
+            }
+            catch (e) {
+                console.error(e);
+                if (_this.options.stopOnError) {
+                    return;
+                }
+            }
+            var isPromise = result && typeof result.then === "function" && typeof result.catch === "function";
+            if (isPromise) {
+                result.then(function () {
+                    if (!_this.options.noRefresh) {
+                        _this.renderer.refresh();
+                    }
+                    node.dom.value = setTimeout(f, _this.options.interval).toString();
+                }).catch(function (e) {
+                    console.error(e);
+                    if (!_this.options.stopOnError) {
+                        if (!_this.options.noRefresh) {
+                            _this.renderer.refresh();
+                        }
+                        node.dom.value = setTimeout(f, _this.options.interval).toString();
+                    }
+                });
+            }
+            else {
+                if (!_this.options.noRefresh) {
+                    _this.renderer.refresh();
+                }
+                node.dom.value = setTimeout(f, _this.options.interval).toString();
+            }
+        };
+        f();
+    };
+    IntervalComponent.prototype.onRemove = function (node) {
+        var timeoutRef = node.dom.value;
+        if (timeoutRef && timeoutRef !== "0") {
+            clearTimeout(parseInt(timeoutRef, 10));
+            node.dom.value = "";
+        }
+    };
+    return IntervalComponent;
+}());
+export { IntervalComponent };

package/lib/components/auto-suggest/AutoSuggestComponent.d.ts

@@ -0,0 +1,22 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IAutoSuggestOptions, IAutoSuggest } from "../../ui/auto.suggest";
+export interface IAutoSuggestComponentOptions extends IAutoSuggestOptions {
+    value?: string;
+    class?: string;
+    style?: string;
+    placeholder?: string;
+}
+export declare class AutoSuggestComponent implements IJSLComponent {
+    private options;
+    private ref;
+    private dom;
+    constructor(options: IAutoSuggestComponentOptions);
+    render(): IJSLVNode;
+    getRef(): IAutoSuggest;
+    getValue(): string;
+    setValue(val: string): void;
+    focus(): void;
+    onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    onRemove(): void;
+}

package/lib/components/auto-suggest/AutoSuggestComponent.js

@@ -0,0 +1,49 @@
+import { AutoSuggest } from "../../ui/auto.suggest";
+var AutoSuggestComponent = /** @class */ (function () {
+    function AutoSuggestComponent(options) {
+        this.options = options;
+        // this.id = this.options.id ?? helper.newDomGuid();
+    }
+    AutoSuggestComponent.prototype.render = function () {
+        var _a;
+        return {
+            tag: "input",
+            attr: { value: this.options.value, class: this.options.class, style: this.options.style, placeholder: (_a = this.options.placeholder) !== null && _a !== void 0 ? _a : "" }
+        };
+    };
+    AutoSuggestComponent.prototype.getRef = function () {
+        return this.ref;
+    };
+    AutoSuggestComponent.prototype.getValue = function () {
+        if (this.dom == null) {
+            return "";
+        }
+        return this.dom.value;
+    };
+    AutoSuggestComponent.prototype.setValue = function (val) {
+        if (this.dom == null) {
+            return;
+        }
+        this.dom.value = val;
+    };
+    AutoSuggestComponent.prototype.focus = function () {
+        if (this.dom == null) {
+            return;
+        }
+        this.dom.focus();
+    };
+    AutoSuggestComponent.prototype.onCreate = function (node) {
+        this.dom = node.dom;
+        AutoSuggest(node.dom, this.options);
+    };
+    AutoSuggestComponent.prototype.onUpdate = function (node) {
+        this.dom = node.dom;
+    };
+    AutoSuggestComponent.prototype.onRemove = function () {
+        if (this.ref != null) {
+            this.ref.destroy();
+        }
+    };
+    return AutoSuggestComponent;
+}());
+export { AutoSuggestComponent };

package/lib/components/button/ButtonComponent.d.ts

@@ -0,0 +1,18 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+export interface IButtonOptions {
+    content: string | IJSLVNode | IJSLComponent;
+    enabled?: boolean;
+    class?: string;
+    outlined?: boolean;
+    style?: string;
+    click?: EventHandler<MouseEvent> | ((evt?: MouseEvent) => void);
+}
+export declare class ButtonComponent implements IJSLComponent {
+    private options;
+    get click(): EventHandler<MouseEvent>;
+    constructor(options: IButtonOptions);
+    isEqual(node: IJSLComponent): boolean;
+    render(): IJSLVNode;
+    private raiseEvent;
+}

package/lib/components/button/ButtonComponent.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { EventHandler } from "../../interaction/eventhandler";
+var ButtonComponent = /** @class */ (function () {
+    function ButtonComponent(options) {
+        this.options = __assign({ enabled: true, class: "" }, options);
+        this.options.click = EventHandler.Create(this.options.click);
+    }
+    Object.defineProperty(ButtonComponent.prototype, "click", {
+        get: function () {
+            return this.options.click;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ButtonComponent.prototype.isEqual = function (node) {
+        return this.__proto__ === node.__proto__;
+    };
+    ButtonComponent.prototype.render = function () {
+        return {
+            tag: "button",
+            attr: {
+                class: "jsl-button " + (this.options.outlined ? "jsl-button-outline " : "") +
+                    this.options.class + (!this.options.enabled ? " disabled" : ""), style: this.options.style, click: this.raiseEvent
+            },
+            content: typeof this.options.content === "string" ? this.options.content : "",
+            children: typeof this.options.content !== "string" ? [this.options.content] : []
+        };
+    };
+    ButtonComponent.prototype.raiseEvent = function (evt) {
+        if (this.options.enabled) {
+            this.options.click.notify(evt);
+        }
+    };
+    return ButtonComponent;
+}());
+export { ButtonComponent };

package/lib/components/checkbox/CheckBoxComponent.d.ts

@@ -0,0 +1,28 @@
+import "./CheckBoxStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface ICheckBoxOptions<T = any> {
+    value?: boolean;
+    label: string;
+    enabled?: boolean;
+    class?: string;
+    style?: string;
+    onChange?: EventHandler<boolean> | ((v?: boolean) => void);
+    id?: string;
+    bindTo?: T;
+    property?: keyof T;
+    bindMode?: "toModel" | "fromModel" | "both";
+    converter?: IDataConverter<any, boolean>;
+}
+export declare class CheckBoxComponent<T = any> implements IJSLComponent {
+    private options;
+    private currentDom;
+    get onChange(): EventHandler<boolean>;
+    constructor(options: ICheckBoxOptions<T>);
+    render(): IJSLVNode;
+    getValue(): boolean;
+    setValue(val: boolean): void;
+    onCreate(node: IJSLVNode): void;
+    private raiseEvent;
+}

package/lib/components/checkbox/CheckBoxComponent.js

@@ -0,0 +1,94 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import "./CheckBoxStyle.scss";
+import { EventHandler } from "../../interaction/eventhandler";
+import { helper } from "../../core/helper";
+var CheckBoxComponent = /** @class */ (function () {
+    function CheckBoxComponent(options) {
+        var _a;
+        this.options = __assign({ enabled: true, class: "", bindMode: "toModel" }, options);
+        if (!this.options.id) {
+            this.options.id = helper.newDomGuid();
+        }
+        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
+            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+    }
+    Object.defineProperty(CheckBoxComponent.prototype, "onChange", {
+        get: function () {
+            return this.options.onChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // public isEqual(node: IJSLComponent): boolean {
+    //     return (this as any).__proto__ === (node as any).__proto__;
+    // }
+    CheckBoxComponent.prototype.render = function () {
+        var _a;
+        var val = this.options.value;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            var current = this.getValue();
+            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+            if (newVal !== current) {
+                val = newVal;
+                if (this.currentDom != null) {
+                    this.currentDom.checked = val;
+                }
+            }
+        }
+        return {
+            tag: "span",
+            attr: { style: this.options.style },
+            children: [{
+                    tag: "input",
+                    attr: {
+                        type: "checkbox",
+                        disabled: !this.options.enabled ? "disabled" : undefined,
+                        class: "checkbox-comp " + (this.options.class || ""),
+                        change: this.raiseEvent,
+                        checked: val ? "checked" : undefined,
+                        id: typeof this.options.id === "string" ? this.options.id : undefined
+                    }
+                }, { tag: "label", content: this.options.label, attr: { for: this.options.id } }]
+        };
+    };
+    CheckBoxComponent.prototype.getValue = function () {
+        var _a;
+        return ((_a = this.currentDom) === null || _a === void 0 ? void 0 : _a.checked) || false;
+    };
+    CheckBoxComponent.prototype.setValue = function (val) {
+        if (this.currentDom != null) {
+            this.currentDom.checked = val;
+        }
+    };
+    CheckBoxComponent.prototype.onCreate = function (node) {
+        this.currentDom = node.dom.querySelector("input");
+    };
+    CheckBoxComponent.prototype.raiseEvent = function (e, node) {
+        var _a;
+        if (this.options.enabled) {
+            var value = node.dom.checked;
+            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
+                this.options.bindTo[this.options.property] = ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(value) : value;
+            }
+            this.options.onChange.notify(value);
+        }
+    };
+    return CheckBoxComponent;
+}());
+export { CheckBoxComponent };

package/lib/components/checkbox/CheckBoxStyle.scss

@@ -0,0 +1,86 @@
+@keyframes checkbox-comp-hover-color{
+    from{
+        border-color:#C0C0C0;
+    }
+    to{
+        border-color:#3B99FF;
+    }
+}
+.checkbox-comp{
+    position:absolute;
+    display:none;
+}
+.checkbox-comp[disabled]{
+    cursor:not-allowed
+}
+.checkbox-comp+label{
+    position:relative;
+    // display:block;
+    padding-left:1.5em;
+    cursor:pointer;
+    vertical-align:middle;
+}
+.checkbox-comp+label:hover:before{
+    animation-duration:.4s;
+    animation-fill-mode:both;
+    animation-name:checkbox-comp-hover-color;
+}
+.checkbox-comp+label:before{
+    position:absolute;
+    top:0;
+    left:0;
+    display:inline-block;
+    width:1em;
+    height:1em;
+    content:'';
+    border:1px solid #C0C0C0;
+}
+.checkbox-comp+label:after{
+    position:absolute;
+    display:none;
+    content:''
+}
+.checkbox-comp[disabled]+label{
+    cursor:not-allowed;
+    // color:#C0C0C0;
+}
+.checkbox-comp[disabled]+label:hover,.checkbox-comp[disabled]+label:before,.checkbox-comp[disabled]+label:after{
+    cursor:not-allowed
+}
+.checkbox-comp[disabled]+label:hover:before{
+    border:1px solid #C0C0C0;
+    animation-name:none
+}
+.checkbox-comp[disabled]+label:before{
+    border-color:#C0C0C0;
+}
+.checkbox-comp:checked+label:before{
+    animation-name:none
+}
+.checkbox-comp:checked+label:after{
+    display:block
+}
+.checkbox-comp+label:before{
+    border-radius:0.2em;
+}
+.checkbox-comp+label:after{
+    top:0.1em; //2px;
+    left:0.3em; //7px;
+    box-sizing:border-box;
+    width:0.5em; //6px;
+    height:0.7em; //12px;
+    transform:rotate(45deg);
+    border-width:0.15em;
+    border-style:solid;
+    border-color:#fff;
+    border-top:0;
+    border-left:0
+}
+.checkbox-comp:checked+label:before{
+    border-color:#3B99FF;
+    background:#3B99FF;
+}
+.checkbox-comp:checked[disabled]+label:before{
+    border-color:#c9e2f9;
+    background:#c9e2f9
+}

package/lib/components/date/DateComponent.d.ts

@@ -0,0 +1,32 @@
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { IDatePickerOptions, IDatePicker } from "../../ui/date.picker";
+import { EventHandler } from "../../interaction/eventhandler";
+import { IDataConverter } from "../../interaction/dataconverter";
+export interface IDateComponentOptions<T = any> extends IDatePickerOptions {
+    id?: string;
+    class?: string;
+    style?: string;
+    placeholder?: string;
+    value?: Date;
+    onChange?: EventHandler<Date> | ((v?: Date) => void);
+    bindTo?: T;
+    property?: keyof T;
+    bindMode?: "toModel" | "fromModel" | "both";
+    converter?: IDataConverter<any, Date>;
+    enabled?: boolean;
+}
+export declare class DateComponent<T = any> implements IJSLComponent {
+    private options;
+    private ref;
+    private currentDom;
+    constructor(options: IDateComponentOptions<T>);
+    get onChange(): EventHandler<Date>;
+    render(): IJSLVNode;
+    getValue(): string;
+    getValueAsDate(): Date;
+    getRef(): IDatePicker;
+    onCreate(node: IJSLVNode): void;
+    onUpdate(node: IJSLVNode): void;
+    onRemove(): void;
+    private raiseEvent;
+}

package/lib/components/date/DateComponent.js

@@ -0,0 +1,106 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { DatePicker } from "../../ui/date.picker";
+import { date } from "../../core/date";
+import { helper } from "../../core/helper";
+import { EventHandler } from "../../interaction/eventhandler";
+var DateComponent = /** @class */ (function () {
+    function DateComponent(options) {
+        var _a;
+        this.options = __assign({ enabled: true, id: helper.newDomGuid(), bindMode: "toModel" }, options);
+        if (this.options.bindTo != null && this.options.property != null && this.options.value == null) {
+            this.options.value = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+        }
+        this.options.onChange = EventHandler.Create(this.options.onChange);
+    }
+    Object.defineProperty(DateComponent.prototype, "onChange", {
+        get: function () {
+            return this.options.onChange;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DateComponent.prototype.render = function () {
+        var _a;
+        var val = this.options.value;
+        if (this.options.bindMode !== "toModel" && this.options.bindTo != null && this.options.property != null) {
+            var current = this.getValue();
+            var newVal = (((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toUI) ?
+                this.options.converter.toUI(this.options.bindTo[this.options.property]) :
+                this.options.bindTo[this.options.property]);
+            var newValStr = date.format(newVal);
+            if (newValStr !== current) {
+                val = newVal;
+                if (this.currentDom != null) {
+                    this.currentDom.value = newValStr;
+                }
+            }
+        }
+        return {
+            tag: "input",
+            attr: {
+                id: this.options.id,
+                class: this.options.class,
+                style: this.options.style,
+                disabled: !this.options.enabled ? "disabled" : undefined,
+                placeholder: this.options.placeholder,
+                value: date.format(val),
+                change: this.raiseEvent,
+            }
+        };
+    };
+    DateComponent.prototype.getValue = function () {
+        if (this.currentDom == null) {
+            return "";
+        }
+        return this.currentDom.value;
+    };
+    DateComponent.prototype.getValueAsDate = function () {
+        if (this.currentDom == null) {
+            return null;
+        }
+        if (this.options.parse) {
+            return this.options.parse(this.currentDom.value);
+        }
+        return date.parse(this.currentDom.value);
+    };
+    DateComponent.prototype.getRef = function () {
+        return this.ref;
+    };
+    DateComponent.prototype.onCreate = function (node) {
+        this.currentDom = node.dom;
+        this.ref = DatePicker(this.currentDom, this.options);
+    };
+    DateComponent.prototype.onUpdate = function (node) {
+        this.currentDom = node.dom;
+    };
+    DateComponent.prototype.onRemove = function () {
+        if (this.ref != null) {
+            this.ref.destroy();
+        }
+    };
+    DateComponent.prototype.raiseEvent = function (e, node) {
+        var _a;
+        if (this.options.enabled) {
+            var val = date.parse(node.dom.value);
+            if (this.options.bindTo && this.options.bindMode !== "fromModel" && this.options.property) {
+                this.options.bindTo[this.options.property] =
+                    ((_a = this.options.converter) === null || _a === void 0 ? void 0 : _a.toData) ? this.options.converter.toData(val) : val;
+            }
+            this.options.onChange.notify(val);
+        }
+    };
+    return DateComponent;
+}());
+export { DateComponent };

package/lib/components/date-range/DateRangeComponent.d.ts

@@ -0,0 +1,35 @@
+import "./DateRangeStyle.scss";
+import { IJSLComponent, IJSLVNode } from "jsl-render";
+import { EventHandler } from "../../interaction/eventhandler";
+export interface IDateRangeValue {
+    minValue: Date;
+    maxValue: Date;
+}
+export interface IDateRangeOptions {
+    class?: string;
+    style?: string;
+    min: Date;
+    max: Date;
+    minValue?: Date;
+    maxValue?: Date;
+    increment: "days" | "weeks" | "month" | "years";
+    onChange?: EventHandler<IDateRangeValue> | ((v?: IDateRangeValue) => void);
+}
+export declare class DateRangeComponent implements IJSLComponent {
+    State: {
+        currentMin: any;
+        currentMax: any;
+    };
+    private manualChange;
+    private minDate;
+    private maxDate;
+    private options;
+    private slider;
+    constructor(o: IDateRangeOptions);
+    render(): IJSLVNode;
+    onCreate(node: IJSLVNode): void;
+    onRemove(): void;
+    getMin(): Date;
+    getMax(): Date;
+    private triggerChange;
+}