@type-dom/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../components/data/td-badge/style");
+require("../../../../theme-chalk/message.scss");

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

@@ -1,26 +1,13 @@
-import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
-import { ITdMessage, ITdMessageConfig } from './td-message.interface';
-export declare class TdMessage extends TypeFragment implements ITdMessage {
+import { TypeFragment } from '@type-dom/framework';
+import { Signal, Computed } from '@type-dom/signals';
+import { ITdMessage, MessageProps } from './td-message.interface';
+import './style/index';
+export declare class MessageClass extends TypeFragment implements ITdMessage {
     className: 'TdMessage';
-    content: Transition;
-    private message;
-    props: ITdMessageConfig;
-    private visible?;
-    private stopTimer;
-    static msgId: number;
-    static msgList: TdMessage[];
-    static groupList: TdMessage[];
-    private repeatNum?;
-    private badge?;
-    constructor(option?: string | ITdMessageConfig);
-    mounted(): void;
-    destroy(root?: TypeNode): void;
-    static success(message: string): void;
-    static warning(message: string): void;
-    static error(message: string): void;
-    static info(message: string): void;
-    startTimer(): void;
-    clearTimer(): void;
-    close(): void;
-    keydown: ({ code }: KeyboardEvent) => void;
+    props: MessageProps;
+    visible?: Signal<boolean>;
+    bottom?: Computed<number>;
+    close?: () => void;
+    constructor(option?: string | MessageProps);
+    setup(): void;
 }

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

@@ -1,23 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdMessage = void 0;
-const utils_1 = require("@type-dom/utils");
+exports.MessageClass = void 0;
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
+const signals_1 = require("@type-dom/signals");
+const aria_1 = require("../../../constants/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 framework_1.TypeFragment {
+const use_global_config_1 = require("../../configuration/td-config-provider/hooks/use-global-config");
+const instance_1 = require("./instance");
+const td_message_const_1 = require("./td-message.const");
+require("./style/index");
+class MessageClass extends framework_1.TypeFragment {
     constructor(option) {
-        var _a;
         super();
-        this.keydown = ({ code }) => {
-            if (code === utils_1.EVENT_CODE.esc) {
-                // press esc to close the message
-                this.close();
-            }
-        };
+        this.className = 'TdMessage';
         let params = {};
         if (typeof option === 'string') {
             params.message = option;
@@ -25,222 +22,141 @@ class TdMessage extends framework_1.TypeFragment {
         else {
             params = option || {};
         }
-        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.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.content = new framework_1.Transition({
-            name: 'td-message-fade',
-            slot: this.message,
-            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.addEmits(td_message_const_1.messageEmits);
+        this.assignProps(td_message_const_1.messageDefaults);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const emit = this.emit;
+        const { ns, zIndex } = (0, use_global_config_1.useGlobalComponentSettings)('message');
+        const { currentZIndex, nextZIndex } = zIndex;
+        const messageRef = (0, signals_1.signal)();
+        const visible = (0, signals_1.signal)(false);
+        const height = (0, signals_1.signal)(0);
+        let stopTimer = undefined;
+        const badgeType = (0, signals_1.computed)(() => props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info');
+        const typeClass = (0, signals_1.computed)(() => {
+            const type = props.type;
+            return { [ns.bm('icon', type)]: type && !!svgs_1.TypeComponentsMap[type] };
         });
-        this.addChild(this.content);
-        // this.message.style.hide();
-        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 iconComponent = (0, signals_1.computed)(() => props.icon || svgs_1.TypeComponentsMap[props.type] || '');
+        const lastOffset = (0, signals_1.computed)(() => (0, instance_1.getLastOffset)(props.id));
+        const offset = (0, signals_1.computed)(() => (0, instance_1.getOffsetOrSpace)(props.id, props.offset) + lastOffset.get());
+        const bottom = (0, signals_1.computed)(() => height.get() + offset.get());
+        const customStyle = (0, signals_1.computed)(() => ({
+            top: `${offset.get()}px`,
+            zIndex: currentZIndex.get(),
+        }));
+        function startTimer() {
+            if (props.duration === 0)
+                return;
+            ({ stop: stopTimer } = (0, framework_1.useTimeoutFn)(() => {
+                close();
+            }, props.duration));
         }
-        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) || ''
-                    }));
-                }
-            }
+        function clearTimer() {
+            stopTimer === null || stopTimer === void 0 ? void 0 : stopTimer();
         }
-        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();
-                    }
-                }
-            }));
+        // const self = this;
+        function close() {
+            visible.set(false);
+            // self.unmount(); // todo add by me;
+            // closeMessage(this) // add by me   emits listener has some wrong , not trigger.
         }
-        this.props = this.useParams(params);
-        const offset = (TdMessage.msgId * 60 + 20) + 'px';
-        this.message.style.addObj({
-            top: offset
-        });
-        if (params.grouping) {
-            if (TdMessage.groupList.length === 0) {
-                TdMessage.msgId = TdMessage.msgId + 1;
-                TdMessage.groupList.push(this);
-                // 特殊类，需要直接渲染。事件触发的类。
-                this.mount(this.to);
-            }
-            else {
-                const msg = TdMessage.groupList[0];
-                msg.repeatNum = (msg.repeatNum || 1) + 1;
-                console.log('msg.repeatNum is ', msg.repeatNum);
-                if (msg.repeatNum > 1) {
-                    if (msg.repeatNum === 2) {
-                        const badgeType = msg.props.type ? (msg.props.type === 'error' ? 'danger' : msg.props.type) : 'info';
-                        msg.badge = new td_badge_class_1.TdBadge({
-                            value: msg.repeatNum,
-                            type: badgeType,
-                            styleObj: td_message_style_1.$messageBadgeStyle
-                        });
-                        msg.message.addChild(msg.badge);
-                    }
-                    else {
-                        // msg.badge!.props.value = msg.repeatNum;
-                        (_a = msg.badge) === null || _a === void 0 ? void 0 : _a.changeValue(msg.repeatNum);
-                    }
-                }
-                this.clearTimer();
-                msg.clearTimer();
-                msg.startTimer();
-                msg.mount(msg.to);
+        function keydown({ code }) {
+            if (code === aria_1.EVENT_CODE.esc) {
+                // press esc to close the message
+                close();
             }
         }
-        else {
-            TdMessage.msgId = TdMessage.msgId + 1;
-            TdMessage.msgList.push(this);
-            // 特殊类，需要直接渲染。事件触发的类。
-            this.mount(this.to);
-        }
-    }
-    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.style.show('flex');
-        document.addEventListener('keydown', this.keydown);
-    }
-    destroy(root) {
-        document.removeEventListener('keydown', this.keydown);
-        super.destroy(root);
-    }
-    static success(message) {
-        new TdMessage({
-            message,
-            type: 'success'
-        });
-    }
-    static warning(message) {
-        new TdMessage({
-            message,
-            type: 'warning'
+        (0, framework_1.onMounted)(() => {
+            startTimer();
+            nextZIndex();
+            visible.set(true);
         });
-    }
-    static error(message) {
-        new TdMessage({
-            message,
-            type: 'error'
+        (0, signals_1.watch)(() => (0, signals_1.unref)(props.repeatNum), () => {
+            clearTimer();
+            startTimer();
         });
-    }
-    static info(message) {
-        new TdMessage({
-            message,
-            type: 'info'
+        (0, framework_1.useEventListener)(document, 'keydown', keydown);
+        (0, framework_1.useResizeObserver)(messageRef, () => {
+            height.set(messageRef.get().getBoundingClientRect().height);
         });
-    }
-    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.style.hide();
-        this.clearTimer();
-        TdMessage.msgId = (TdMessage.msgId || 1) - 1;
-        TdMessage.groupList = TdMessage.groupList.filter(item => item !== this);
-        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.style.setObj(customStyle);
+        (0, framework_1.defineExpose)({
+            visible,
+            bottom,
+            close,
         });
-        this.destroy();
+        this.addChild(new framework_1.Transition({
+            name: ns.b('fade'),
+            // onBeforeLeave: props.onClose, // todo 会提前消除 instance
+            onAfterLeave: () => {
+                var _a;
+                // console.error('TdMessage Transition afterLeave');
+                (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+                emit('destroy');
+            },
+            slot: new framework_1.Div({
+                vShow: visible,
+                refDom: messageRef,
+                attrObj: {
+                    class: [
+                        ns.b(),
+                        { [ns.m(props.type)]: props.type },
+                        ns.is('center', props.center),
+                        ns.is('closable', props.showClose),
+                        ns.is('plain', props.plain),
+                        props.customClass,
+                    ],
+                    role: 'alert',
+                },
+                styleObj: customStyle,
+                events: {
+                    mouseenter: clearTimer,
+                    mouseleave: startTimer,
+                },
+                slot: [
+                    new td_badge_class_1.TdBadge({
+                        vIf: (0, signals_1.computed)(() => props.repeatNum && props.repeatNum.get() > 1),
+                        value: props.repeatNum,
+                        type: badgeType.get(),
+                        class: ns.e('badge'),
+                    }),
+                    new td_icon_class_1.TdIcon({
+                        vIf: iconComponent.get(),
+                        class: [ns.e('icon'), typeClass],
+                        slot: new (iconComponent.get())(),
+                    }),
+                    ...(0, framework_1.arraySlot)((_a = props.slot) !== null && _a !== void 0 ? _a : (!props.dangerouslyUseHTMLString
+                        ? new framework_1.P({
+                            // vIf: ,
+                            class: ns.e('content'),
+                            slot: props.message,
+                        })
+                        : // <!-- Caution here, message could've been compromised, never use user's input as message -->
+                            new framework_1.P({
+                                // vIf: props.dangerouslyUseHTMLString,
+                                class: ns.e('content'),
+                                slot: new framework_1.XElement({
+                                    template: props.message,
+                                }),
+                            }))),
+                    new td_icon_class_1.TdIcon({
+                        vIf: props.showClose,
+                        class: ns.e('closeBtn'),
+                        slot: new svgs_1.ElCloseSvg(),
+                        events: {
+                            click: (evt) => {
+                                close();
+                                evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                            },
+                        },
+                    }),
+                ],
+            }),
+        }));
     }
 }
-exports.TdMessage = TdMessage;
-TdMessage.msgId = 0;
-TdMessage.msgList = [];
-TdMessage.groupList = [];
+exports.MessageClass = MessageClass;

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

@@ -0,0 +1,6 @@
+import { MessageProps } from './td-message.interface';
+export declare const messageDefaults: MessageProps;
+export declare const messageEmits: {
+    destroy: () => boolean;
+};
+export declare const messageTypes: readonly ["success", "info", "warning", "error"];

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messageTypes = exports.messageEmits = exports.messageDefaults = void 0;
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+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: (0, signals_1.signal)(1),
+    appendTo: utils_1.isClient ? document.body : undefined,
+};
+exports.messageEmits = {
+    destroy: () => true,
+};
+exports.messageTypes = ['success', 'info', 'warning', 'error'];

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

@@ -1,27 +1,12 @@
-import { ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
-export interface ITdMessage extends ITypeElement {
+import { ITypeFragment, TypeFragmentProps, TypeSvgSvg, TypeNode } from '@type-dom/framework';
+import { MessageClass } from './td-message.class';
+import { Signal } from '@type-dom/signals';
+export interface ITdMessage extends ITypeFragment {
     className: 'TdMessage';
+    props: MessageProps;
 }
-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 ITypeConfig {
+export type IMessageType = 'success' | 'info' | 'warning' | 'error';
+export interface MessageProps extends TypeFragmentProps {
     /**
      * @description custom class name for Message
      *     default: messageDefaults.customClass,
@@ -46,7 +31,7 @@ export interface ITdMessageConfig extends ITypeConfig {
      * @description custom icon component, overrides `type`
      *     default: messageDefaults.icon,
      */
-    icon?: TypeSvgSvg;
+    icon?: typeof TypeSvgSvg;
     /**
      * @description message dom id
      *     default: messageDefaults.id,
@@ -56,7 +41,7 @@ export interface ITdMessageConfig extends ITypeConfig {
      * @description message text
      *     default: messageDefaults.message,
      */
-    message?: string | TypeElement;
+    message?: string | TypeNode;
     /**
      * @description callback function when closed with the message instance as the parameter
      *     default: messageDefaults.onClose,
@@ -71,7 +56,7 @@ export interface ITdMessageConfig extends ITypeConfig {
      * @description message type
      *     default: messageDefaults.type,
      */
-    type?: IMessageTypes;
+    type?: IMessageType;
     /**
      * @description whether message is plain
      *     default: messageDefaults.plain,
@@ -96,9 +81,48 @@ export interface ITdMessageConfig extends ITypeConfig {
      * @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;
-    };
+    repeatNum?: Signal<number>;
+    appendTo?: HTMLElement;
+}
+export type MessageOptions = Partial<Omit<MessageProps, 'id'> & {
+    appendTo?: HTMLElement | string;
+}>;
+export type MessageParams = MessageOptions | MessageOptions['message'];
+export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
+    /**
+     * @description set the root element for the message, default to `document.body`
+     */
+    appendTo: HTMLElement;
+};
+export type MessageOptionsWithType = Omit<MessageOptions, 'type'>;
+export type MessageParamsWithType = MessageOptionsWithType | MessageOptions['message'];
+export interface MessageHandler {
+    /**
+     * @description close the Message
+     */
+    close: () => void;
+}
+export type MessageFn = {
+    (options?: MessageParams): MessageHandler;
+    closeAll(type?: IMessageType): void;
+};
+export type MessageTypedFn = (options?: MessageParamsWithType) => MessageHandler;
+export interface Message extends MessageFn {
+    success: MessageTypedFn;
+    warning: MessageTypedFn;
+    info: MessageTypedFn;
+    error: MessageTypedFn;
+}
+export type MessageContext = {
+    id: string;
+    vnode: MessageClass;
+    handler: MessageHandler;
+    props: MessageProps;
+};
+export interface MessageConfigContext {
+    max?: number;
+    grouping?: boolean;
+    duration?: number;
+    offset?: number;
+    showClose?: boolean;
 }

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

@@ -1,22 +1,2 @@
 "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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdMessageConfig } from './td-message.interface';
+import { MessageProps } from './td-message.interface';
 export declare const $message: {
     bgColor: string;
     borderColor: string;
@@ -12,6 +12,6 @@ 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 function useMessageStyle(config?: MessageProps): void;
 export declare const $messageIconStyle: IStyle;
-export declare function useType(config?: ITdMessageConfig): void;
+export declare function useMessageType(config?: MessageProps): void;