@type-dom/ui 0.0.1

package/src/basic/td-container/td-main/td-main.interface.d.ts

@@ -0,0 +1,6 @@
+import { ITypeMain } from '@type-dom/framework';
+export interface ITdMain extends ITypeMain {
+    className: 'TdMain';
+}
+export interface ITdMainConfig {
+}

package/src/basic/td-container/td-main/td-main.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/basic/td-icon/td-icon.class.d.ts

@@ -0,0 +1,11 @@
+import { TypeHtml, TypeI, TypeSvgSvg } from '@type-dom/framework';
+import { ITdIcon, ITdIconConfig } from './td-icon.interface';
+export declare class TdIcon extends TypeI implements ITdIcon {
+    className: 'TdIcon';
+    parent?: TypeHtml;
+    svg?: TypeSvgSvg;
+    constructor(config?: Partial<ITdIconConfig>);
+    createSvg(className: string): void;
+    setConfig(config?: Partial<ITdIconConfig>): void;
+    replaceSvg(svg: TypeSvgSvg): void;
+}

package/src/basic/td-icon/td-icon.class.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdIcon = void 0;
+const framework_1 = require("@type-dom/framework");
+const td_icon_style_1 = require("./td-icon.style");
+class TdIcon extends framework_1.TypeI {
+    constructor(config) {
+        super();
+        this.className = 'TdIcon';
+        const slot = new framework_1.Slot(this);
+        this.childNodes = [slot];
+        this.setConfig(config);
+    }
+    // todo
+    createSvg(className) {
+        return;
+    }
+    setConfig(config) {
+        this.addStyleObj(td_icon_style_1.$tdIcon);
+        if (config === null || config === void 0 ? void 0 : config.SvgClass) {
+            const svg = new config.SvgClass(this);
+            // svg.resetSize('1em', '1em');
+            this.addChild(svg);
+            this.svg = svg;
+        }
+        if (config === null || config === void 0 ? void 0 : config.color) {
+            this.addStyleObj({
+                color: config.color,
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.size) {
+            this.addStyleObj({
+                fontSize: config.size,
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.loading) {
+            this.addStyleObj(td_icon_style_1.$iconLoading);
+        }
+        if ((config === null || config === void 0 ? void 0 : config.position) === 'right') { // 位置应该是引用的对象中设置，自身应该不需要设置。
+            this.addStyleObj(td_icon_style_1.$iconRight);
+        }
+        else {
+            // this.addStyleObj($iconLeft);
+        }
+        // this.addStyleObj(sizeOpts[size]);
+        // this.addAttrObj({
+        //   type: 'primary', // success warn danger primary
+        //   size: 'middle' // small middle, large
+        // });
+    }
+    replaceSvg(svg) {
+        this.childNodes.splice(1, 1, svg);
+        svg.parent = this;
+        this.render();
+    }
+}
+exports.TdIcon = TdIcon;

package/src/basic/td-icon/td-icon.interface.d.ts

@@ -0,0 +1,11 @@
+import { ITypeI } from '@type-dom/framework';
+export interface ITdIcon extends ITypeI {
+    className: 'TdIcon';
+}
+export interface ITdIconConfig {
+    SvgClass: any;
+    size: string;
+    color: string;
+    loading: boolean;
+    position: 'left' | 'right';
+}

package/src/basic/td-icon/td-icon.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/basic/td-icon/td-icon.style.d.ts

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/framework';
+export declare const $tdIcon: Partial<IStyle>;
+export declare const $iconLoading: {
+    animation: string;
+};
+export declare const $iconRight: {
+    marginLeft: string;
+    float: string;
+};
+export declare const $iconLeft: {
+    marginRight: string;
+    float: string;
+};

package/src/basic/td-icon/td-icon.style.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
+const framework_1 = require("@type-dom/framework");
+exports.$tdIcon = {
+    height: '1em',
+    width: '1em',
+    lineHeight: '1em',
+    display: framework_1.StyleDisplay.inlineFlex,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: framework_1.StylePosition.relative,
+    fill: 'currentColor',
+    // color: var(--color),
+    fontSize: 'inherit',
+};
+exports.$iconLoading = {
+    animation: 'rotating 2s linear infinite'
+};
+exports.$iconRight = {
+    marginLeft: '5px',
+    float: 'right',
+};
+exports.$iconLeft = {
+    marginRight: '5px',
+    float: 'left',
+};

package/src/basic/td-select/option/option.class.d.ts

@@ -0,0 +1,12 @@
+import { TextNode, TypeNode, TypeOption } from '@type-dom/framework';
+import { TdSelect } from '../td-select.class';
+import { ISelectOption } from './option.interface';
+export declare class SelectOption extends TypeOption implements ISelectOption {
+    nodeName: 'option';
+    className: 'SelectOption';
+    parent?: TdSelect;
+    dom: HTMLOptionElement;
+    childNodes: TypeNode[];
+    text: TextNode;
+    constructor();
+}

package/src/basic/td-select/option/option.class.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOption = void 0;
+const framework_1 = require("@type-dom/framework");
+class SelectOption extends framework_1.TypeOption {
+    constructor() {
+        super();
+        this.nodeName = 'option';
+        this.dom = document.createElement(this.nodeName);
+        this.className = 'SelectOption';
+        this.propObj.attrObj = {
+            name: 'option'
+        };
+        this.text = new framework_1.TextNode('一个选项');
+        this.childNodes = [this.text];
+    }
+}
+exports.SelectOption = SelectOption;

package/src/basic/td-select/option/option.interface.d.ts

@@ -0,0 +1,5 @@
+import { ITypeOption } from '@type-dom/framework';
+export interface ISelectOption extends ITypeOption {
+    nodeName: 'option';
+    className: 'SelectOption';
+}

package/src/basic/td-select/option/option.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/basic/td-select/td-select.class.d.ts

@@ -0,0 +1,14 @@
+import { TypeHtml, TypeSelect } from '@type-dom/framework';
+import { IOption } from '../../form/field-item/field-item.interface';
+import { SelectOption } from './option/option.class';
+import { ITdSelect } from './td-select.interface';
+export declare class TdSelect extends TypeSelect implements ITdSelect {
+    className: 'TdSelect';
+    parent?: TypeHtml;
+    childNodes: SelectOption[];
+    value?: string | number | boolean;
+    constructor();
+    setOptions(options: IOption[], value: string | number | boolean): void;
+    resetOptions(options: IOption[], value: string | number | boolean): void;
+    initEvents(): void;
+}

package/src/basic/td-select/td-select.class.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSelect = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const option_class_1 = require("./option/option.class");
+class TdSelect extends framework_1.TypeSelect {
+    constructor() {
+        super();
+        this.className = 'TdSelect';
+        this.addAttrName('td-select');
+        this.childNodes = [];
+    }
+    setOptions(options, value) {
+        this.clearChildNodes();
+        this.clearChildDom();
+        const firstOpt = new option_class_1.SelectOption();
+        firstOpt.text.setText('请选择');
+        firstOpt.addAttrObj({
+            label: '请选择',
+            value: 0
+        });
+        this.addChild(firstOpt);
+        options.forEach(opt => {
+            const optObj = new option_class_1.SelectOption();
+            optObj.text.setText(opt.label);
+            optObj.addAttrObj({
+                label: opt.label,
+                value: opt.value
+            });
+            // console.log('opt is ', opt);
+            // opt.selected && optObj.addAttribute('selected', true);
+            this.addChild(optObj);
+        });
+        this.childNodes.forEach(optObj => {
+            if (String(optObj.attrObj.value).trim() === String(value).trim()) {
+                optObj.addAttribute('selected', true);
+            }
+            else {
+                // optObj.removeAttribute('selected');
+            }
+        });
+        // console.error('this.dom.value is ', this.dom.value);
+    }
+    resetOptions(options, value) {
+        this.setOptions(options, value);
+        this.render(); // 需要单独渲染。
+        // console.error('this.dom.value is ', this.dom.value);
+    }
+    initEvents() {
+        this.events.push(
+        // 如果只有一个选项时，监听change，input有问题。
+        (0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((evt) => {
+            console.log('this.select.dom click, event is ', evt);
+            console.log('this.select.dom.value is ', this.dom.value);
+            // console.log(this.reset);
+            // this.setValue(this.dom.value);
+            this.value = this.dom.value;
+        }), (0, rxjs_1.fromEvent)(this.dom, 'change').subscribe((evt) => {
+            console.log('this.select.dom change, event is ', evt);
+            console.log('this.select.dom.value is ', this.dom.value);
+            // console.log(this.reset);
+            // this.setValue(this.dom.value);
+            this.value = this.dom.value;
+        }));
+    }
+}
+exports.TdSelect = TdSelect;

package/src/basic/td-select/td-select.interface.d.ts

@@ -0,0 +1,6 @@
+import { ITypeSelect } from '@type-dom/framework';
+import { ISelectOption } from './option/option.interface';
+export interface ITdSelect extends ITypeSelect {
+    className: 'TdSelect';
+    childNodes: ISelectOption[];
+}

package/src/basic/td-select/td-select.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/data/index.js

@@ -0,0 +1 @@
+"use strict";

package/src/feedback/dialog/dialog.d.ts

@@ -0,0 +1,7 @@
+import { TypeRoot } from '@type-dom/framework';
+import { Overlay } from '../overlay/overlay.abstract';
+export declare class Dialog extends Overlay {
+    className: 'Dialog';
+    parent?: TypeRoot;
+    constructor();
+}

package/src/feedback/dialog/dialog.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const overlay_abstract_1 = require("../overlay/overlay.abstract");
+class Dialog extends overlay_abstract_1.Overlay {
+    constructor() {
+        super();
+        this.className = 'Dialog';
+        this.addAttrObj({
+            name: 'dialog',
+        });
+    }
+}
+exports.Dialog = Dialog;

package/src/feedback/index.d.ts

@@ -0,0 +1,2 @@
+export { Dialog } from './dialog/dialog';
+export { MessageBox } from './message-box/message-box';

package/src/feedback/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBox = exports.Dialog = void 0;
+var dialog_1 = require("./dialog/dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_1.Dialog; } });
+var message_box_1 = require("./message-box/message-box");
+Object.defineProperty(exports, "MessageBox", { enumerable: true, get: function () { return message_box_1.MessageBox; } });

package/src/feedback/message-box/message-box.d.ts

@@ -0,0 +1,9 @@
+import { TypeRoot } from '@type-dom/framework';
+import { Overlay } from '../overlay/overlay.abstract';
+export declare class MessageBox extends Overlay {
+    className: 'MessageBox';
+    parent?: TypeRoot;
+    constructor();
+    toast(title: string, message: string): void;
+    confirm(title: string, message: string): void;
+}

package/src/feedback/message-box/message-box.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBox = void 0;
+const overlay_abstract_1 = require("../overlay/overlay.abstract");
+class MessageBox extends overlay_abstract_1.Overlay {
+    constructor() {
+        super();
+        this.className = 'MessageBox';
+        this.addAttrObj({
+            name: 'message-box',
+        });
+    }
+    toast(title, message) {
+        // this.clear();
+        this.setTitle(title);
+        this.setMsg(message);
+        this.show();
+    }
+    confirm(title, message) {
+        this.setTitle(title);
+        this.setMsg(message);
+    }
+}
+exports.MessageBox = MessageBox;

package/src/feedback/overlay/container/body/body.d.ts

@@ -0,0 +1,7 @@
+import { TypeDiv } from '@type-dom/framework';
+import { OverlayContainer } from '../container';
+export declare class OverlayBody extends TypeDiv {
+    className: 'OverlayBody';
+    parent?: OverlayContainer;
+    constructor();
+}

package/src/feedback/overlay/container/body/body.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayBody = void 0;
+const framework_1 = require("@type-dom/framework");
+class OverlayBody extends framework_1.TypeDiv {
+    constructor() {
+        super();
+        this.className = 'OverlayBody';
+        this.propObj = {
+            styleObj: {
+                padding: '30px 20px',
+                fontSize: '14px',
+                wordBreak: 'break-all',
+            },
+            attrObj: {
+                name: 'overlay-body',
+            }
+        };
+    }
+}
+exports.OverlayBody = OverlayBody;

package/src/feedback/overlay/container/container.d.ts

@@ -0,0 +1,15 @@
+import { TypeDiv } from '@type-dom/framework';
+import { Overlay } from '../overlay.abstract';
+import { OverlayHeader } from './header/header';
+import { OverlayBody } from './body/body';
+import { OverlayFooter } from './footer/footer';
+export declare class OverlayContainer extends TypeDiv {
+    className: 'OverlayContainer';
+    parent?: Overlay;
+    childNodes: [OverlayHeader, OverlayBody, OverlayFooter];
+    header: OverlayHeader;
+    body: OverlayBody;
+    footer: OverlayFooter;
+    constructor();
+    initEvents(): void;
+}

package/src/feedback/overlay/container/container.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayContainer = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const header_1 = require("./header/header");
+const body_1 = require("./body/body");
+const footer_1 = require("./footer/footer");
+class OverlayContainer extends framework_1.TypeDiv {
+    constructor() {
+        super();
+        this.className = 'OverlayContainer';
+        this.propObj = {
+            styleObj: {
+                position: framework_1.StylePosition.relative,
+                margin: '15vh auto 50px',
+                width: '50%',
+                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
+                borderRadius: '4px',
+                backgroundColor: '#FFF',
+                padding: '20px',
+            },
+            attrObj: {
+                name: 'overlay-container'
+            }
+        };
+        this.header = new header_1.OverlayHeader();
+        this.header.parent = this;
+        this.body = new body_1.OverlayBody();
+        this.body.parent = this;
+        this.footer = new footer_1.OverlayFooter();
+        this.footer.parent = this;
+        this.childNodes = [this.header, this.body, this.footer];
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((e) => {
+            e.stopPropagation();
+        }));
+    }
+}
+exports.OverlayContainer = OverlayContainer;

package/src/feedback/overlay/container/footer/cancel-button/cancel-button.d.ts

@@ -0,0 +1,8 @@
+import { TypeButton } from '@type-dom/framework';
+import { OverlayFooter } from '../footer';
+export declare class CancelButton extends TypeButton {
+    className: 'CancelButton';
+    parent?: OverlayFooter;
+    constructor();
+    initEvents(): void;
+}

package/src/feedback/overlay/container/footer/cancel-button/cancel-button.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelButton = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+class CancelButton extends framework_1.TypeButton {
+    constructor() {
+        super();
+        this.className = 'CancelButton';
+        this.addStyleObj({
+            // backgroundColor: '#f00',
+            // color: '#FFF',
+            margin: 'auto 10px',
+            // outline: 'none',
+            // border: '1px solid #f00',
+        });
+        this.addAttrName('cancel-button');
+        this.setTitle('取消');
+    }
+    initEvents() {
+        var _a, _b;
+        if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
+            console.error('this.parent?.parent?.parent is undefined . ');
+        }
+        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.hide();
+        }));
+    }
+}
+exports.CancelButton = CancelButton;

package/src/feedback/overlay/container/footer/confirm-button/confirm-button.d.ts

@@ -0,0 +1,9 @@
+import { TextNode, TypeButton } from '@type-dom/framework';
+import { OverlayFooter } from '../footer';
+export declare class ConfirmButton extends TypeButton {
+    className: 'ConfirmButton';
+    parent?: OverlayFooter;
+    childNodes: [TextNode];
+    constructor();
+    initEvents(): void;
+}

package/src/feedback/overlay/container/footer/confirm-button/confirm-button.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmButton = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+class ConfirmButton extends framework_1.TypeButton {
+    constructor() {
+        super();
+        this.className = 'ConfirmButton';
+        this.propObj = {
+            styleObj: {
+                backgroundColor: '#1890ff',
+                color: '#fff',
+                borderColor: '#1890ff',
+                margin: 'auto 10px',
+            },
+            attrObj: {
+                name: 'confirm-button',
+            }
+        };
+        this.setTitle('确认');
+        this.childNodes = [this.textNode];
+    }
+    initEvents() {
+        var _a, _b;
+        if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
+            console.error('this.parent?.parent?.parent is undefined . ');
+        }
+        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.hide();
+        }));
+    }
+}
+exports.ConfirmButton = ConfirmButton;

package/src/feedback/overlay/container/footer/footer.d.ts

@@ -0,0 +1,11 @@
+import { TypeDiv } from '@type-dom/framework';
+import { OverlayContainer } from '../container';
+import { TdButton } from '../../../../basic/td-button/td-button.class';
+export declare class OverlayFooter extends TypeDiv {
+    className: 'OverlayFooter';
+    parent?: OverlayContainer;
+    cancelBtn: TdButton;
+    confirmBtn: TdButton;
+    constructor();
+    initEvents(): void;
+}

package/src/feedback/overlay/container/footer/footer.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayFooter = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const td_button_class_1 = require("../../../../basic/td-button/td-button.class");
+// import { CancelButton } from './cancel-button/cancel-button';
+// import { ConfirmButton } from './confirm-button/confirm-button';
+class OverlayFooter extends framework_1.TypeDiv {
+    constructor() {
+        super();
+        this.className = 'OverlayFooter';
+        this.addStyleObj({
+            padding: '20px',
+            paddingTop: '10px',
+            textAlign: 'right',
+            boxSizing: 'border-box',
+        });
+        this.addAttrName('overlay-foot');
+        // this.cancelBtn = new CancelButton(this);
+        this.cancelBtn = new td_button_class_1.TdButton({
+            title: '取消',
+        });
+        // cancelBtn.hide();
+        // this.cancelBtn.setTitle('取消');
+        this.confirmBtn = new td_button_class_1.TdButton({
+            title: '确定',
+            type: 'primary'
+        });
+        this.confirmBtn.parent = this;
+        this.confirmBtn.addStyleObj({
+            marginLeft: '10px',
+        });
+        // this.confirmBtn.setTitle('确定');
+        this.childNodes = [this.cancelBtn, this.confirmBtn];
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.cancelBtn.dom, 'click').subscribe(() => {
+            var _a, _b;
+            console.log('cancelBtn click . ');
+            (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.hide();
+        }), (0, rxjs_1.fromEvent)(this.confirmBtn.dom, 'click').subscribe(() => {
+            var _a, _b;
+            console.log('confirmBtn click . ');
+            (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.hide();
+        }));
+    }
+}
+exports.OverlayFooter = OverlayFooter;

package/src/feedback/overlay/container/header/close-button/close-button.d.ts

@@ -0,0 +1,11 @@
+import { TypeButton } from '@type-dom/framework';
+import { TdCloseSvg } from '@type-dom/svgs';
+import { OverlayHeader } from '../header';
+export declare class CloseButton extends TypeButton {
+    className: 'CloseButton';
+    parent?: OverlayHeader;
+    childNodes: [TdCloseSvg];
+    private readonly svg;
+    constructor();
+    initEvents(): void;
+}

package/src/feedback/overlay/container/header/close-button/close-button.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+class CloseButton extends framework_1.TypeButton {
+    constructor() {
+        super();
+        this.className = 'CloseButton';
+        this.propObj = {
+            styleObj: {
+                cursor: framework_1.StyleCursor.pointer,
+                position: framework_1.StylePosition.absolute,
+                top: '20px',
+                right: '20px',
+                padding: '0',
+                background: 'transparent',
+                border: 'none',
+                outline: 'none',
+                fontSize: '16px',
+            },
+            attrObj: {
+                name: 'close-button',
+            }
+        };
+        this.svg = new svgs_1.TdCloseSvg(this);
+        this.childNodes = [this.svg];
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.hide();
+        }));
+    }
+}
+exports.CloseButton = CloseButton;