@type-dom/ui 0.0.3 → 0.0.5

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

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMessage = 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 aria_1 = require("../../../aria");
+const td_badge_class_1 = require("../../data/td-badge/td-badge.class");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_message_interface_1 = require("./td-message.interface");
+const td_message_style_1 = require("./td-message.style");
+class TdMessage extends ui_abstract_1.UI {
+    constructor(option) {
+        let params = {};
+        if (typeof option === 'string') {
+            params.message = option;
+        }
+        else {
+            params = option || {};
+        }
+        super(params, 'fragment');
+        this.className = 'TdMessage';
+        this.visible = false;
+        this.stopTimer = undefined;
+        (0, td_message_style_1.useStyle)(params);
+        this.to = (params === null || params === void 0 ? void 0 : params.appendTo) || document.body;
+        this.transition = new framework_1.Transition({
+            name: 'td-message-fade',
+            emits: {
+                beforeLeave: () => {
+                    var _a;
+                    console.log('beforeLeave');
+                    (_a = params.onClose) === null || _a === void 0 ? void 0 : _a.call(params);
+                },
+                afterLeave: () => {
+                    var _a, _b;
+                    console.log('afterLeave');
+                    (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a); // destroy ???
+                    this.message.dom.remove();
+                }
+            }
+        });
+        this.addChild(this.transition);
+        this.message = new framework_1.Div({
+            attrObj: {
+                role: 'alert'
+            },
+            styleObj: td_message_style_1.$messageStyle,
+            events: {
+                mouseenter: () => {
+                    console.log('mouseenter');
+                    this.clearTimer();
+                },
+                mouseleave: () => {
+                    console.log('mouseleave');
+                    this.startTimer();
+                }
+            }
+        });
+        // this.message.ctrl.hide();
+        // this.transition.setSlot(this.message);
+        this.transition.slotChild(this.message);
+        const type = (params === null || params === void 0 ? void 0 : params.type) || 'info';
+        const iconComponent = (params === null || params === void 0 ? void 0 : params.icon) || (new svgs_1.TypeComponentsMap[type]()) || '';
+        console.log('iconComponent', iconComponent);
+        if (iconComponent) {
+            this.message.addChild(new td_icon_class_1.TdIcon({
+                name: 'icon',
+                styleObj: td_message_style_1.$messageIconStyle,
+                svgObj: iconComponent
+            }));
+        }
+        const defaultSlot = new framework_1.SlotNode('default');
+        this.message.addChild(defaultSlot);
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            defaultSlot.addSlot(params.slot);
+        }
+        else {
+            if (params === null || params === void 0 ? void 0 : params.dangerouslyUseHTMLString) {
+                // todo params.message 是否是html字符串
+                const parser = new framework_1.Parser();
+                if (typeof params.message === 'string') {
+                    const item = parser.parseFromString(params.message);
+                    defaultSlot.addSlot(new framework_1.P({
+                        name: 'content',
+                        styleObj: td_message_style_1.$messageContentStyle,
+                        childNodes: [item]
+                    }));
+                }
+                else {
+                    console.error('params.message is not a string . ');
+                }
+            }
+            else {
+                console.log('params.message', params.message);
+                if (params.message instanceof framework_1.TypeElement) {
+                    defaultSlot.addSlot(new framework_1.P({
+                        name: 'content',
+                        styleObj: td_message_style_1.$messageContentStyle,
+                        childNodes: [params.message]
+                    }));
+                }
+                else {
+                    defaultSlot.addSlot(new framework_1.P({
+                        name: 'content',
+                        styleObj: td_message_style_1.$messageContentStyle,
+                        text: (params === null || params === void 0 ? void 0 : params.message) || ''
+                    }));
+                }
+            }
+        }
+        if (params === null || params === void 0 ? void 0 : params.showClose) {
+            this.message.addChild(new td_icon_class_1.TdIcon({
+                name: 'close-btn',
+                svgObj: new svgs_1.ElCloseSvg(),
+                styleObj: td_message_style_1.$messageCloseBtnStyle,
+                events: {
+                    click: (evt) => {
+                        console.log('close');
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        this.close();
+                    }
+                }
+            }));
+        }
+        this.props = this.setParams(params);
+        const offset = (TdMessage.msgId * 60 + 20) + 'px';
+        const customStyle = {
+            top: offset
+        };
+        this.message.ctrl.addStyleObj(customStyle);
+        if (params.grouping) {
+            if (TdMessage.msgList.length === 0) {
+                TdMessage.msgId = TdMessage.msgId + 1;
+                TdMessage.msgList.push(this);
+                // 特殊类，需要直接渲染。事件触发的类。
+                this.mount(this.to);
+            }
+            else {
+                const msg = TdMessage.msgList[0];
+                msg.repeatNum = (msg.repeatNum || 1) + 1;
+                console.log('msg.repeatNum is ', msg.repeatNum);
+                if (msg.repeatNum > 1) {
+                    const badgeType = msg.props.type ? (msg.props.type === 'error' ? 'danger' : msg.props.type) : 'info';
+                    msg.message.addChild(new td_badge_class_1.TdBadge({
+                        value: msg.repeatNum,
+                        type: badgeType,
+                        styleObj: td_message_style_1.$messageBadgeStyle
+                    }));
+                }
+                this.clearTimer();
+                msg.clearTimer();
+                msg.startTimer();
+                msg.mount(msg.to);
+            }
+        }
+        else {
+            TdMessage.msgId = TdMessage.msgId + 1;
+            TdMessage.msgList.push(this);
+            // 特殊类，需要直接渲染。事件触发的类。
+            this.mount(this.to);
+        }
+    }
+    initEvents() {
+        this.addEvent('keydown', document, evt => {
+            this.keydown(evt);
+        });
+    }
+    mounted() {
+        if ((this === null || this === void 0 ? void 0 : this.repeatNum) && (this === null || this === void 0 ? void 0 : this.repeatNum) > 1) {
+            return;
+        }
+        this.startTimer();
+        // nextZIndex()
+        this.visible = true;
+        this.message.ctrl.show('flex');
+    }
+    static success(message) {
+        new TdMessage({
+            message,
+            type: 'success'
+        });
+    }
+    static warning(message) {
+        new TdMessage({
+            message,
+            type: 'warning'
+        });
+    }
+    static error(message) {
+        new TdMessage({
+            message,
+            type: 'error'
+        });
+    }
+    static info(message) {
+        new TdMessage({
+            message,
+            type: 'info'
+        });
+    }
+    startTimer() {
+        if (this.props.duration === 0)
+            return;
+        ({ stop: this.stopTimer } = (0, framework_1.useTimeoutFn)(() => {
+            this.close();
+        }, this.props.duration || td_message_interface_1.messageDefaults.duration));
+    }
+    clearTimer() {
+        var _a;
+        (_a = this.stopTimer) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    close() {
+        console.log('close . ');
+        this.visible = false;
+        this.message.ctrl.hide();
+        this.clearTimer();
+        this.destroy();
+        TdMessage.msgId = (TdMessage.msgId || 1) - 1;
+        TdMessage.msgList = TdMessage.msgList.filter(item => item !== this);
+        console.log('TdMessage.msgList is ', TdMessage.msgList, TdMessage.msgList.length);
+        TdMessage.msgList.forEach((msg, index) => {
+            const offset = (index * 60 + 20) + 'px';
+            const customStyle = {
+                top: offset
+            };
+            msg.message.ctrl.setStyleObj(customStyle);
+        });
+    }
+    keydown({ code }) {
+        if (code === aria_1.EVENT_CODE.esc) {
+            // press esc to close the message
+            this.close();
+        }
+    }
+}
+exports.TdMessage = TdMessage;
+TdMessage.msgId = 0;
+TdMessage.msgList = [];

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

@@ -0,0 +1,105 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeElement, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdMessage extends IUI {
+    className: 'TdMessage';
+}
+export declare const messageDefaults: {
+    readonly customClass: "";
+    readonly center: false;
+    readonly dangerouslyUseHTMLString: false;
+    readonly duration: 3000;
+    readonly icon: undefined;
+    readonly id: "";
+    readonly message: "";
+    readonly onClose: undefined;
+    readonly showClose: false;
+    readonly type: "info";
+    readonly plain: false;
+    readonly offset: 16;
+    readonly zIndex: 0;
+    readonly grouping: false;
+    readonly repeatNum: 1;
+    readonly appendTo: HTMLElement;
+};
+export type IMessageTypes = 'success' | 'info' | 'warning' | 'error';
+export interface ITdMessageConfig extends IUIConfig {
+    /**
+     * @description custom class name for Message
+     *     default: messageDefaults.customClass,
+     */
+    customClass?: string;
+    /**
+     * @description whether to center the text
+     *     default: messageDefaults.center,
+     */
+    center?: boolean;
+    /**
+     * @description whether `message` is treated as HTML string
+     *     default: messageDefaults.dangerouslyUseHTMLString,
+     */
+    dangerouslyUseHTMLString?: boolean;
+    /**
+     * @description display duration, millisecond. If set to 0, it will not turn off automatically
+     *     default: messageDefaults.duration,
+     */
+    duration?: number;
+    /**
+     * @description custom icon component, overrides `type`
+     *     default: messageDefaults.icon,
+     */
+    icon?: TypeSvgSvg;
+    /**
+     * @description message dom id
+     *     default: messageDefaults.id,
+     */
+    id?: string;
+    /**
+     * @description message text
+     *     default: messageDefaults.message,
+     */
+    message?: string | TypeElement;
+    /**
+     * @description callback function when closed with the message instance as the parameter
+     *     default: messageDefaults.onClose,
+     */
+    onClose?: () => void;
+    /**
+     * @description whether to show a close button
+     *     default: messageDefaults.showClose,
+     */
+    showClose?: boolean;
+    /**
+     * @description message type
+     *     default: messageDefaults.type,
+     */
+    type?: IMessageTypes;
+    /**
+     * @description whether message is plain
+     *     default: messageDefaults.plain,
+     */
+    plain?: boolean;
+    /**
+     * @description set the distance to the top of viewport
+     *     default: messageDefaults.offset,
+     */
+    offset?: number;
+    /**
+     * @description input box size
+     *     default: messageDefaults.zIndex
+     */
+    zIndex?: number;
+    /**
+     * @description merge messages with the same content, type of VNode message is not supported
+     *     default: messageDefaults.grouping,
+     */
+    grouping?: boolean;
+    /**
+     * @description The number of repetitions, similar to badge, is used as the initial number when used with `grouping`
+     *     default: messageDefaults.repeatNum
+     */
+    repeatNum?: number;
+    appendTo?: HTMLBodyElement;
+    emits?: {
+        destroy?: () => void;
+    };
+}

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messageDefaults = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.messageDefaults = {
+    customClass: '',
+    center: false,
+    dangerouslyUseHTMLString: false,
+    duration: 3000,
+    icon: undefined,
+    id: '',
+    message: '',
+    onClose: undefined,
+    showClose: false,
+    type: 'info',
+    plain: false,
+    offset: 16,
+    zIndex: 0,
+    grouping: false,
+    repeatNum: 1,
+    appendTo: utils_1.isClient ? document.body : undefined
+};

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

@@ -0,0 +1,17 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdMessageConfig } from './td-message.interface';
+export declare const $message: {
+    bgColor: string;
+    borderColor: string;
+    padding: string;
+    closeSize: string;
+    closeIconColor: string;
+    closeHoverColor: string;
+};
+export declare const $messageStyle: IStyle;
+export declare const $messageContentStyle: IStyle;
+export declare const $messageBadgeStyle: IStyle;
+export declare const $messageCloseBtnStyle: IStyle;
+export declare function useStyle(config?: ITdMessageConfig): void;
+export declare const $messageIconStyle: IStyle;
+export declare function useType(config?: ITdMessageConfig): void;

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useType = exports.$messageIconStyle = exports.useStyle = exports.$messageCloseBtnStyle = exports.$messageBadgeStyle = exports.$messageContentStyle = exports.$messageStyle = exports.$message = void 0;
+const var_1 = require("../../../styles/var");
+exports.$message = {
+    // bgColor: getCssVar('color', 'info', 'light-9'),
+    bgColor: var_1.$colors.info['light-9'],
+    // borderColor: getCssVar('border-color-lighter'),
+    borderColor: var_1.$borderColor.lighter,
+    padding: '11px 15px',
+    closeSize: '16px',
+    // closeIconColor: getCssVar('text-color-placeholder'),
+    closeIconColor: var_1.$textColor.placeholder,
+    // closeHoverColor: getCssVar('text-color-secondary'),
+    closeHoverColor: var_1.$textColor.secondary
+};
+exports.$messageStyle = {
+    width: 'fit-content',
+    maxWidth: 'calc(100% - 32px)',
+    boxSizing: 'border-box',
+    // border-radius: getCssVar('border-radius-base'),
+    borderRadius: var_1.$borderRadius.base,
+    // border-width: getCssVar('border-width'),
+    borderWidth: var_1.$borderWidth,
+    // border-style: getCssVar('border-style'),
+    borderStyle: var_1.$borderStyle,
+    // border-color: getCssVar('message', 'border-color'),
+    borderColor: exports.$message.borderColor,
+    position: 'fixed',
+    left: '50%',
+    top: '20px',
+    transform: 'translateX(-50%)',
+    // background-color: getCssVar('message', 'bg-color'),
+    backgroundColor: exports.$message.bgColor,
+    // transition: opacity getCssVar('transition-duration'), transform 0.4s, top 0.4s,
+    transition: 'opacity 0.3s, transform 0.4s, top 0.4s',
+    // padding: getCssVar('message', 'padding'),
+    padding: exports.$message.padding,
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px'
+};
+exports.$messageContentStyle = {
+    padding: 0,
+    fontSize: '14px',
+    lineHeight: 1,
+    margin: 0 // add by me  P 标签默认有 margin
+};
+exports.$messageBadgeStyle = {
+    position: 'absolute',
+    top: '-8px',
+    right: '-8px'
+};
+exports.$messageCloseBtnStyle = {
+    cursor: 'pointer',
+    // color: getCssVar('message', 'close-icon-color'),
+    color: exports.$message.closeIconColor,
+    // font-size: getCssVar('message', 'close-size'),
+    fontSize: exports.$message.closeSize
+};
+function useStyle(config) {
+    if (config === null || config === void 0 ? void 0 : config.center) {
+        exports.$messageStyle.justifyContent = 'center';
+    }
+    useType(config);
+    if (config === null || config === void 0 ? void 0 : config.plain) {
+        // background-color: getCssVar('bg-color', 'overlay');
+        exports.$messageStyle.backgroundColor = var_1.$bgColor.overlay;
+        // border-color: getCssVar('bg-color', 'overlay');
+        exports.$messageStyle.borderColor = var_1.$bgColor.overlay;
+        // box-shadow: getCssVar('box-shadow-light');
+        exports.$messageStyle.boxShadow = var_1.$boxShadow.light;
+    }
+    else {
+        exports.$messageStyle.backgroundColor = exports.$message.bgColor;
+        exports.$messageStyle.borderColor = exports.$message.borderColor;
+        exports.$messageStyle.boxShadow = undefined;
+    }
+}
+exports.useStyle = useStyle;
+exports.$messageIconStyle = {};
+function useType(config) {
+    const type = (config === null || config === void 0 ? void 0 : config.type) || 'info';
+    //    @include css-var-from-global(
+    //         ('message', 'bg-color'),
+    //         ('color', $type, 'light-9')
+    //       );
+    exports.$message.bgColor = var_1.$colors[type]['light-9'];
+    //       @include css-var-from-global(
+    //         ('message', 'border-color'),
+    //         ('color', $type, 'light-8')
+    //       );
+    exports.$message.borderColor = var_1.$colors[type]['light-8'];
+    //       @include css-var-from-global(('message', 'text-color'), ('color', $type));
+    const $messageTextColor = var_1.$colors[type].base;
+    //  .#{$namespace}-message__content {
+    //         color: getCssVar('message', 'text-color');
+    //         overflow-wrap: break-word;
+    //       }
+    exports.$messageContentStyle.color = $messageTextColor;
+    exports.$messageContentStyle.overflowWrap = 'break-word';
+    exports.$messageIconStyle.color = $messageTextColor;
+}
+exports.useType = useType;

package/src/components/feedback/td-message-box/td-message-box.class.d.ts

@@ -0,0 +1,42 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdMessageBox, ITdMessageBoxConfig, IAction, IMessageBoxInputData } from './td-message-box.interface';
+export declare class TdMessageBox extends UI<undefined> implements ITdMessageBox {
+    className: 'TdMessageBox';
+    props: ITdMessageBoxConfig;
+    private transition;
+    private overlay;
+    private dialog;
+    private messageBox;
+    private header?;
+    private title?;
+    private visible;
+    private state;
+    private content;
+    private container;
+    private inputDiv?;
+    private btns;
+    private cancelBtn?;
+    private confirmBtn;
+    private msgDiv?;
+    private input?;
+    private overlayEvent;
+    private errorMsg?;
+    private onDraggable;
+    private offDraggable;
+    constructor(params?: ITdMessageBoxConfig);
+    mounted(): void;
+    beforeDestroy(): void;
+    static alert(message: string, title?: string, params?: ITdMessageBoxConfig): void;
+    static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
+    static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): Promise<IMessageBoxInputData | undefined>;
+    promise(value?: string): Promise<IMessageBoxInputData | undefined>;
+    doClose(): void;
+    handleWrapperClick(): void;
+    handleInputEnter: (e: KeyboardEvent) => void;
+    handleAction(action: IAction): void;
+    validate(): boolean;
+    getInputElement(): HTMLInputElement | HTMLTextAreaElement | undefined;
+    handleClose(): void;
+    onCloseRequested(): void;
+    getAppendToElement(props?: ITdMessageBoxConfig): HTMLElement;
+}