@type-dom/ui 0.0.4 → 0.0.6

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

@@ -7,15 +7,13 @@ class ConfirmButton extends framework_1.TypeButton {
     constructor() {
         super();
         this.className = 'ConfirmButton';
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             backgroundColor: '#1890ff',
             color: '#fff',
             borderColor: '#1890ff',
             margin: 'auto 10px'
-        };
-        this.attrObj = {
-            name: 'confirm-button'
-        };
+        });
+        this.ctrl.addAttrName('confirm-button');
         this.setTitle('确认');
         this.childNodes = [this.textNode];
     }
@@ -26,7 +24,7 @@ class ConfirmButton extends framework_1.TypeButton {
         }
         this.subscriptions.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();
+            (_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.ctrl.hide();
         }));
     }
 }

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

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

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

@@ -1,49 +1,47 @@
 "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({
+        this.ctrl.addStyleObj({
             padding: '20px',
             paddingTop: '10px',
             textAlign: 'right',
             boxSizing: 'border-box'
         });
-        this.addAttrName('overlay-foot');
+        this.ctrl.addAttrName('overlay-foot');
         // this.cancelBtn = new CancelButton(this);
         this.cancelBtn = new td_button_class_1.TdButton({
-            title: '取消'
+            slot: '取消',
+            events: {
+                click: () => {
+                    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.ctrl.hide();
+                }
+            }
         });
-        // cancelBtn.hide();
-        // this.cancelBtn.setTitle('取消');
+        // cancelBtn.ctrl.hide();
         this.confirmBtn = new td_button_class_1.TdButton({
-            title: '确定',
-            type: 'primary'
-        });
-        this.confirmBtn.parent = this;
-        this.confirmBtn.addStyleObj({
-            marginLeft: '10px'
+            slot: '确定',
+            type: 'primary',
+            styleObj: {
+                marginLeft: '10px'
+            },
+            events: {
+                click: () => {
+                    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.ctrl.hide();
+                }
+            }
         });
         // this.confirmBtn.setTitle('确定');
-        this.childNodes = [this.cancelBtn, this.confirmBtn];
-    }
-    initEvents() {
-        this.subscriptions.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();
-        }));
+        this.addChildren(this.cancelBtn, this.confirmBtn);
     }
 }
 exports.OverlayFooter = OverlayFooter;

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

@@ -8,9 +8,9 @@ class CloseButton extends framework_1.TypeButton {
     constructor() {
         super();
         this.className = 'CloseButton';
-        this.styleObj = {
-            cursor: framework_1.StyleCursor.pointer,
-            position: framework_1.StylePosition.absolute,
+        this.ctrl.addStyleObj({
+            cursor: 'pointer',
+            position: 'absolute',
             top: '20px',
             right: '20px',
             padding: '0',
@@ -18,17 +18,15 @@ class CloseButton extends framework_1.TypeButton {
             border: 'none',
             outline: 'none',
             fontSize: '16px'
-        };
-        this.attrObj = {
-            name: 'close-button'
-        };
+        });
+        this.ctrl.addAttrName('close-button');
         this.svg = new svgs_1.TdCloseSvg({ parent: this });
         this.childNodes = [this.svg];
     }
     initEvents() {
         this.subscriptions.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();
+            (_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.ctrl.hide();
         }));
     }
 }

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

@@ -8,12 +8,12 @@ class OverlayHeader extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'OverlayHeader';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             padding: '20px',
             paddingBottom: '10px',
             boxSizing: 'border-box'
         });
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'overlay-header'
         });
         this.title = new title_1.OverlayTitle();

package/src/components/feedback/overlay/container/header/title/title.js

@@ -6,14 +6,12 @@ class OverlayTitle extends framework_1.TypeSpan {
     constructor() {
         super();
         this.className = 'OverlayTitle';
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             lineHeight: '16px',
             fontSize: '16px',
             color: '#000'
-        };
-        this.attrObj = {
-            name: 'overlay-title'
-        };
+        });
+        this.ctrl.addAttrName('overlay-title');
         this.textNode = new framework_1.TextNode('标题');
         this.childNodes = [this.textNode];
     }

package/src/components/feedback/overlay/overlay.abstract.js

@@ -7,8 +7,8 @@ const container_1 = require("./container/container");
 class Overlay extends framework_1.TypeDiv {
     constructor() {
         super();
-        this.addStyleObj({
-            position: framework_1.StylePosition.fixed,
+        this.ctrl.addStyleObj({
+            position: 'fixed',
             left: '0',
             top: '0',
             right: '0',
@@ -17,7 +17,7 @@ class Overlay extends framework_1.TypeDiv {
             zIndex: 2000,
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             overflow: 'auto',
-            display: framework_1.StyleDisplay.none
+            display: 'none'
         });
         // document.body.appendChild(this.dom); // 挂载在 body 上
         this.container = new container_1.OverlayContainer();
@@ -26,15 +26,13 @@ class Overlay extends framework_1.TypeDiv {
     }
     setTitle(title) {
         this.container.header.title.textNode.setText(title);
-        this.container.header.render();
+        this.container.header.mount();
     }
     // 设置消息
     setMsg(msg) {
         const span = new framework_1.Span({
             parent: this.container.body,
-            childNodes: [
-                new framework_1.TextNode(msg)
-            ]
+            childNodes: [new framework_1.TextNode(msg)]
         });
         // this.container.body.clearChild();
         this.container.body.clearChildren();
@@ -54,7 +52,7 @@ class Overlay extends framework_1.TypeDiv {
     }
     initEvents() {
         this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
-            this.hide();
+            this.ctrl.hide();
         }));
     }
 }

package/src/components/feedback/td-alert/td-alert.class.d.ts

@@ -0,0 +1,15 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdAlert, ITdAlertConfig } from './td-alert.interface';
+export declare class TdAlert extends UI<undefined> implements ITdAlert {
+    className: 'TdAlert';
+    props: ITdAlertConfig;
+    private transition;
+    private alertDiv;
+    private alertContent;
+    private alertTitle?;
+    private alertDescription?;
+    constructor(params?: ITdAlertConfig);
+    addTitle(params?: ITdAlertConfig): void;
+    addDescription(params?: ITdAlertConfig): void;
+    addCloseElement(params?: ITdAlertConfig): void;
+}

package/src/components/feedback/td-alert/td-alert.class.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdAlert = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_alert_style_1 = require("./td-alert.style");
+class TdAlert extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'fragment');
+        this.className = 'TdAlert';
+        this.transition = new framework_1.Transition({
+            name: 'td-alert-fade'
+        });
+        this.addChild(this.transition);
+        (0, td_alert_style_1.useStyle)(params);
+        this.alertDiv = new framework_1.Div({
+            attrObj: {
+                role: 'alert'
+            },
+            styleObj: td_alert_style_1.$alertStyle,
+        });
+        if (params === null || params === void 0 ? void 0 : params.styleObj) {
+            this.alertDiv.ctrl.addStyleObj(params.styleObj);
+        }
+        this.transition.addChild(this.alertDiv);
+        const IconComponent = svgs_1.TypeComponentsMap[(params === null || params === void 0 ? void 0 : params.type) || 'info'];
+        if ((params === null || params === void 0 ? void 0 : params.showIcon) && IconComponent) {
+            this.alertDiv.addChild(new td_icon_class_1.TdIcon({
+                styleObj: td_alert_style_1.$alertIconStyle,
+                svgObj: new IconComponent()
+            }));
+        }
+        this.alertContent = new framework_1.Div({
+            styleObj: td_alert_style_1.$alertContentStyle
+        });
+        this.alertDiv.addChild(this.alertContent);
+        this.addTitle(params);
+        this.addDescription(params);
+        this.addCloseElement(params);
+        this.props = this.setParams(params);
+    }
+    addTitle(params) {
+        var _a, _b;
+        if ((params === null || params === void 0 ? void 0 : params.title) || ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.title)) {
+            this.alertTitle = new framework_1.Span({
+                styleObj: td_alert_style_1.$alertTitleStyle
+            });
+            this.alertContent.addChild(this.alertTitle);
+            if ((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title) {
+                this.alertTitle.slotChild(params.slots.title);
+            }
+            else if (params.title) {
+                this.alertTitle.addChild(new framework_1.TextNode(params.title));
+            }
+        }
+    }
+    addDescription(params) {
+        if ((params === null || params === void 0 ? void 0 : params.slot) || (params === null || params === void 0 ? void 0 : params.description)) {
+            this.alertDescription = new framework_1.P({
+                name: 'alert-description',
+                styleObj: td_alert_style_1.$alertDescriptionStyle
+            });
+            this.alertContent.addChild(this.alertDescription);
+            if (params.slot) {
+                this.alertDescription.slotChild(params.slot);
+            }
+            else if (params.description) {
+                this.alertDescription.addChild(new framework_1.TextNode(params.description));
+            }
+        }
+    }
+    addCloseElement(params) {
+        var _a;
+        const closable = (_a = params === null || params === void 0 ? void 0 : params.closable) !== null && _a !== void 0 ? _a : true;
+        if (closable) {
+            if (params === null || params === void 0 ? void 0 : params.closeText) {
+                this.alertContent.addChild(new framework_1.Div({
+                    text: params.closeText,
+                    styleObj: td_alert_style_1.$alertCloseBtnStyle,
+                    events: {
+                        click: () => {
+                            var _a;
+                            if ((_a = params.emits) === null || _a === void 0 ? void 0 : _a.close) {
+                                params.emits.close();
+                            }
+                            this.alertDiv.ctrl.hide();
+                        }
+                    }
+                }));
+            }
+            else {
+                this.alertContent.addChild(new td_icon_class_1.TdIcon({
+                    styleObj: td_alert_style_1.$alertCloseBtnStyle,
+                    svgObj: new svgs_1.ElCloseSvg(),
+                    events: {
+                        click: () => {
+                            var _a;
+                            if ((_a = params === null || params === void 0 ? void 0 : params.emits) === null || _a === void 0 ? void 0 : _a.close) {
+                                params.emits.close();
+                            }
+                            this.alertDiv.ctrl.hide();
+                        }
+                    }
+                }));
+            }
+        }
+    }
+}
+exports.TdAlert = TdAlert;

package/src/components/feedback/td-alert/td-alert.interface.d.ts

@@ -0,0 +1,41 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdAlert extends IUI {
+    className: 'TdAlert';
+}
+export interface ITdAlertConfig extends IUIConfig {
+    /**
+     * @description alert title.
+     *     default: ''
+     */
+    title?: string;
+    description?: string;
+    /**
+     * @description alert type.
+     *     default: 'info'
+     */
+    type?: 'success' | 'warning' | 'error' | 'info';
+    /**
+     * @description whether alert can be dismissed.
+     *     default: true
+     */
+    closable?: boolean;
+    /**
+     * @description text for replacing x button
+     *     default: ''
+     */
+    closeText?: string;
+    /**
+     * @description whether show icon
+     */
+    showIcon?: boolean;
+    /**
+     * @description should content be placed in center.
+     *     default: 'light'
+     */
+    center?: boolean;
+    effect?: IAlertEffect;
+    emits?: {
+        close?(): void;
+    };
+}
+export type IAlertEffect = 'dark' | 'light';

package/src/components/feedback/td-alert/td-alert.interface.js

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

package/src/components/feedback/td-alert/td-alert.style.d.ts

@@ -0,0 +1,21 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdAlertConfig } from './td-alert.interface';
+export declare const $alert: {
+    padding: string;
+    borderRadiusBase: string;
+    titleFontSize: string;
+    titleWithDescriptionFontSize: string;
+    descriptionFontSize: string;
+    closeFontSize: string;
+    closeCustomedFontSize: string;
+    iconSize: string;
+    iconLargeSize: string;
+};
+export declare const $alertStyle: IStyle;
+export declare const $alertContentStyle: IStyle;
+export declare const $alertIconStyle: IStyle;
+export declare const $alertTitleStyle: IStyle;
+export declare const $alertDescriptionStyle: IStyle;
+export declare const $alertCloseBtnStyle: IStyle;
+export declare function useStyle(config?: ITdAlertConfig): void;
+export declare function useType(config?: ITdAlertConfig): void;

package/src/components/feedback/td-alert/td-alert.style.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$alertCloseBtnStyle = exports.$alertDescriptionStyle = exports.$alertTitleStyle = exports.$alertIconStyle = exports.$alertContentStyle = exports.$alertStyle = exports.$alert = void 0;
+exports.useStyle = useStyle;
+exports.useType = useType;
+const var_1 = require("../../../styles/var");
+exports.$alert = {
+    padding: '8px 16px',
+    // 'border-radius-base': getCssVar('border-radius-base'),
+    borderRadiusBase: var_1.$borderRadius.base,
+    titleFontSize: '14px',
+    titleWithDescriptionFontSize: '16px',
+    descriptionFontSize: '14px',
+    closeFontSize: '16px',
+    closeCustomedFontSize: '14px',
+    iconSize: '16px',
+    iconLargeSize: '28px',
+};
+exports.$alertStyle = {
+    width: '100%',
+    // padding: getCssVar('alert', 'padding'),
+    padding: exports.$alert.padding,
+    margin: 0,
+    boxSizing: 'border-box',
+    // border-radius: getCssVar('alert', 'border-radius-base'),
+    borderRadius: exports.$alert.borderRadiusBase,
+    position: 'relative',
+    // backgroundColor: getCssVar('color', 'white'),
+    backgroundColor: var_1.$colorWhite,
+    overflow: 'hidden',
+    opacity: 1,
+    display: 'flex',
+    alignItems: 'center',
+    // transition: opacity getCssVar('transition-duration', 'fast'),
+    transition: 'opacity ' + var_1.$transitionDurationFast,
+};
+exports.$alertContentStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+};
+exports.$alertIconStyle = {
+    // font-size: getCssVar('alert', 'icon-size'),
+    fontSize: exports.$alert.iconSize,
+    // width: getCssVar('alert', 'icon-size'),
+    width: exports.$alert.iconSize,
+    marginRight: '8px',
+};
+exports.$alertTitleStyle = {
+    // font-size: getCssVar('alert', 'title-font-size'),
+    fontSize: exports.$alert.titleFontSize,
+    lineHeight: '24px',
+};
+exports.$alertDescriptionStyle = {
+    // font-size: getCssVar('alert', 'description-font-size');
+    fontSize: exports.$alert.descriptionFontSize,
+    margin: 0
+};
+exports.$alertCloseBtnStyle = {
+    // font-size: getCssVar('alert', 'close-font-size'),
+    fontSize: exports.$alert.closeFontSize,
+    opacity: 1,
+    position: 'absolute',
+    top: '12px',
+    right: '16px',
+    cursor: 'pointer',
+};
+function useStyle(config) {
+    useType(config);
+    if (config === null || config === void 0 ? void 0 : config.center) {
+        exports.$alertStyle.justifyContent = 'center';
+    }
+    else {
+        delete exports.$alertStyle.justifyContent;
+    }
+    const big = !!(config === null || config === void 0 ? void 0 : config.description) || !!(config === null || config === void 0 ? void 0 : config.slot);
+    if (big) {
+        exports.$alertIconStyle.fontSize = exports.$alert.iconLargeSize;
+        exports.$alertIconStyle.width = exports.$alert.iconLargeSize;
+        exports.$alertIconStyle.marginRight = '12px';
+    }
+    const withDescription = (config === null || config === void 0 ? void 0 : config.description) || (config === null || config === void 0 ? void 0 : config.slot);
+    if (withDescription) {
+        exports.$alertTitleStyle.fontSize = exports.$alert.titleWithDescriptionFontSize;
+    }
+}
+function useType(config) {
+    const effect = (config === null || config === void 0 ? void 0 : config.effect) || 'light';
+    const $alertBgColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info']['light-9'];
+    switch (effect) {
+        case 'light':
+            exports.$alertStyle.backgroundColor = $alertBgColor;
+            exports.$alertStyle.color = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
+            exports.$alertDescriptionStyle.color = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
+            break;
+        case 'dark':
+            exports.$alertStyle.backgroundColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
+            exports.$alertStyle.color = var_1.$colorWhite;
+            break;
+    }
+    // if (config.)
+}

package/src/components/feedback/td-dialog/td-dialog.class.d.ts

@@ -0,0 +1,12 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdDialog, ITdDialogConfig } from './td-dialog.interface';
+export declare class TdDialog extends UI<undefined> implements ITdDialog {
+    className: 'TdDialog';
+    props: ITdDialogConfig;
+    private teleport;
+    private dialogContent;
+    private overlay;
+    constructor(params?: ITdDialogConfig);
+    show(): void;
+    handleClose(): void;
+}

package/src/components/feedback/td-dialog/td-dialog.class.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdDialog = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_dialog_content_class_1 = require("../td-dialog-content/td-dialog-content.class");
+const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
+class TdDialog extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'fragment');
+        console.log('TdDialog . ');
+        this.className = 'TdDialog';
+        const appendTo = (params === null || params === void 0 ? void 0 : params.appendToBody) ? document.body : params === null || params === void 0 ? void 0 : params.appendTo;
+        this.dialogContent = new td_dialog_content_class_1.TdDialogContent(params);
+        this.overlay = new td_overlay_class_1.TdOverlay({
+            name: 'td-dialog-overlay',
+            styleObj: {
+                display: (params === null || params === void 0 ? void 0 : params.modelValue) ? 'block' : 'none',
+            },
+            slot: this.dialogContent,
+        });
+        if (params === null || params === void 0 ? void 0 : params.appendToBody) {
+            this.overlay.ctrl.addStyleObj({
+                zIndex: td_overlay_class_1.overlayZIndex + 1000,
+            });
+        }
+        this.teleport = new framework_1.Teleport({
+            // disabled: appendTo !== document.body ? false : false,
+            to: appendTo,
+            childNodes: [
+                new framework_1.Transition({
+                    name: 'dialog-fade',
+                    emits: {
+                        afterEnter: () => {
+                            console.log('afterEnter . ');
+                        },
+                        afterLeave: () => {
+                            console.log('afterLeave . ');
+                        },
+                        beforeLeave: () => {
+                            console.log('beforeLeave . ');
+                        }
+                    },
+                    slot: this.overlay,
+                }),
+            ]
+        });
+        this.addChild(this.teleport);
+        this.props = this.setParams(params);
+    }
+    show() {
+        console.log('TdDialog . show . ');
+        this.overlay.ctrl.show();
+    }
+    handleClose() {
+        this.overlay.ctrl.hide();
+        // function hide(shouldCancel?: boolean) {
+        //   if (shouldCancel) return
+        //   // closed.value = true
+        //   // visible.value = false
+        // }
+        //
+        // if (this.props.emits?.beforeClose) {
+        //   this.props.emits.beforeClose(hide)
+        // } else {
+        //   close()
+        // }
+    }
+}
+exports.TdDialog = TdDialog;