@type-dom/ui 0.1.0 → 0.1.2

package/src/components/feedback/td-loading/index.js

@@ -0,0 +1,21 @@
+"use strict";
+// import { Loading } from './src/service'
+// import { vLoading } from './src/directive'
+//
+// import type { App } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdLoadingService = exports.TdLoading = void 0;
+const tslib_1 = require("tslib");
+// installer and everything in all
+const service_1 = require("./service");
+Object.defineProperty(exports, "TdLoadingService", { enumerable: true, get: function () { return service_1.Loading; } });
+exports.TdLoading = {
+    // install(app: App) {
+    //   app.directive('loading', vLoading)
+    //   app.config.globalProperties.$loading = Loading
+    // },
+    // directive: vLoading,
+    service: service_1.Loading,
+};
+exports.default = exports.TdLoading;
+tslib_1.__exportStar(require("./types"), exports);

package/src/components/feedback/td-loading/loading.d.ts

@@ -0,0 +1,26 @@
+import { LoadingOptionsResolved } from './types';
+export declare function createLoadingComponent(options: LoadingOptionsResolved): {
+    data: {
+        originalPosition: string;
+        originalOverflow: string;
+        visible: boolean;
+        parent: import("./types").LoadingParentElement;
+        background: import("@type-dom/signals").MaybeRef<string>;
+        svg: import("@type-dom/signals").MaybeRef<string>;
+        svgViewBox: import("@type-dom/signals").MaybeRef<string>;
+        spinner: import("@type-dom/signals").MaybeRef<boolean | string>;
+        text: import("@type-dom/signals").MaybeRef<string>;
+        fullscreen: boolean;
+        lock: boolean;
+        customClass: import("@type-dom/signals").MaybeRef<string>;
+        target: HTMLElement;
+        beforeClose?: () => boolean;
+        closed?: () => void;
+    };
+    setText: (text: string) => void;
+    removeElLoadingChild: () => void;
+    close: () => void;
+    handleAfterLeave: () => void;
+    vm: import("@type-dom/framework").TypeElement;
+    readonly $el: HTMLElement;
+};

package/src/components/feedback/td-loading/loading.js

@@ -0,0 +1,142 @@
+"use strict";
+// import {
+//   Transition,
+//   createApp,
+//   createVNode,
+//   defineComponent,
+//   h,
+//   reactive,
+//   ref,
+//   toRefs,
+//   vShow,
+//   withCtx,
+//   withDirectives,
+// } from 'vue'
+// import { removeClass } from '@element-plus/utils'
+// import { useGlobalComponentSettings } from '@element-plus/components/config-provider'
+//
+// import type { UseNamespaceReturn } from '@element-plus/hooks'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLoadingComponent = createLoadingComponent;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const td_config_provider_1 = require("../../configuration/td-config-provider");
+function createLoadingComponent(options) {
+    let afterLeaveTimer;
+    // IMPORTANT NOTE: this is only a hacking way to expose the injections on an
+    // instance, DO NOT FOLLOW this pattern in your own code.
+    const afterLeaveFlag = (0, signals_1.signal)(false);
+    const data = Object.assign(Object.assign({}, options), { originalPosition: '', originalOverflow: '', visible: false });
+    function setText(text) {
+        data.text = text;
+    }
+    function destroySelf() {
+        const target = data.parent;
+        const ns = vm.ns;
+        if (!(target === null || target === void 0 ? void 0 : target.vLoadingAddClassList)) {
+            let loadingNumber = target === null || target === void 0 ? void 0 : target.getAttribute('loading-number');
+            loadingNumber = Number.parseInt(loadingNumber) - 1;
+            if (!loadingNumber) {
+                (0, utils_1.removeClass)(target, ns.bm('parent', 'relative'));
+                target.removeAttribute('loading-number');
+            }
+            else {
+                target.setAttribute('loading-number', loadingNumber.toString());
+            }
+            (0, utils_1.removeClass)(target, ns.bm('parent', 'hidden'));
+        }
+        removeElLoadingChild();
+        loadingInstance.unmount();
+    }
+    function removeElLoadingChild() {
+        var _a, _b;
+        (_b = (_a = vm.dom) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(vm.dom);
+    }
+    function close() {
+        var _a;
+        if (options.beforeClose && !options.beforeClose())
+            return;
+        afterLeaveFlag.set(true);
+        clearTimeout(afterLeaveTimer);
+        afterLeaveTimer = setTimeout(handleAfterLeave, 400);
+        data.visible = false;
+        (_a = options.closed) === null || _a === void 0 ? void 0 : _a.call(options);
+    }
+    function handleAfterLeave() {
+        if (!afterLeaveFlag.get())
+            return;
+        const target = data.parent;
+        afterLeaveFlag.set(false);
+        target.vLoadingAddClassList = undefined;
+        destroySelf();
+    }
+    class TdLoading extends framework_1.TypeFragment {
+        constructor() {
+            super();
+            this.className = 'TdLoading';
+        }
+        setup() {
+            const { ns, zIndex } = (0, td_config_provider_1.useGlobalComponentSettings)('loading');
+            const svg = (data === null || data === void 0 ? void 0 : data.spinner) || (data === null || data === void 0 ? void 0 : data.svg);
+            const spinner = new svgs_1.SvgSvg({
+                name: 'spinner',
+                attrObj: {
+                    class: 'circular',
+                    viewBox: (data === null || data === void 0 ? void 0 : data.svgViewBox) ? data.svgViewBox : '0 0 50 50'
+                },
+                slot: new framework_1.SvgCircle({
+                    attrObj: {
+                        class: 'path',
+                        cx: '25',
+                        cy: '25',
+                        r: '20',
+                        fill: 'none'
+                    }
+                })
+            });
+            const spinnerText = data.text ? new framework_1.P({
+                class: ns.b('text'),
+                slot: data.text
+            }) : undefined;
+            this.addChild(new framework_1.Transition({
+                name: ns.b('fade'),
+                onAfterLeave: handleAfterLeave,
+                slot: new framework_1.Div({
+                    vShow: data.visible,
+                    class: [
+                        ns.b('mask'),
+                        data.customClass,
+                        data.fullscreen ? 'is-fullscreen' : ''
+                    ],
+                    styleObj: {
+                        backgroundColor: data.background || ''
+                    },
+                    slot: [
+                        new framework_1.Div({
+                            class: ns.b('spinner'),
+                            slot: [spinnerText, spinnerText]
+                        })
+                    ]
+                })
+            }));
+        }
+    }
+    // const elLoadingComponent = new TdLoading()
+    const loadingInstance = new TdLoading(); // createApp(elLoadingComponent)
+    const vm = loadingInstance.mount(document.createElement('div'));
+    return {
+        // ...toRefs(data),
+        data,
+        setText,
+        removeElLoadingChild,
+        close,
+        handleAfterLeave,
+        vm,
+        get $el() {
+            return vm.dom;
+        }
+    };
+}
+// export type LoadingInstance = ReturnType<typeof createLoadingComponent>

package/src/components/feedback/td-loading/service.d.ts

@@ -0,0 +1,3 @@
+import type { TdLoading } from './loading';
+import type { LoadingOptions } from './types';
+export declare const Loading: (options?: LoadingOptions) => TdLoading;

package/src/components/feedback/td-loading/service.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const tslib_1 = require("tslib");
+// @ts-nocheck
+// import { nextTick } from 'vue'
+// import {
+//   addClass,
+//   getStyle,
+//   isClient,
+//   isString,
+//   removeClass,
+// } from '@element-plus/utils'
+const loading_1 = require("./loading");
+// import type { CSSProperties } from 'vue'
+let fullscreenInstance = undefined;
+const Loading = function (options = {}) {
+    if (!isClient)
+        return undefined;
+    const resolved = resolveOptions(options);
+    if (resolved.fullscreen && fullscreenInstance) {
+        return fullscreenInstance;
+    }
+    const instance = (0, loading_1.createLoadingComponent)(Object.assign(Object.assign({}, resolved), { closed: () => {
+            var _a;
+            (_a = resolved.closed) === null || _a === void 0 ? void 0 : _a.call(resolved);
+            if (resolved.fullscreen)
+                fullscreenInstance = undefined;
+        } }));
+    addStyle(resolved, resolved.parent, instance);
+    addClassList(resolved, resolved.parent, instance);
+    resolved.parent.vLoadingAddClassList = () => addClassList(resolved, resolved.parent, instance);
+    /**
+     * add loading-number to parent.
+     * because if a fullscreen loading is triggered when somewhere
+     * a v-loading.body was triggered before and it's parent is
+     * document.body which with a margin , the fullscreen loading's
+     * destroySelf function will remove 'el-loading-parent--relative',
+     * and then the position of v-loading.body will be error.
+     */
+    let loadingNumber = resolved.parent.getAttribute('loading-number');
+    if (!loadingNumber) {
+        loadingNumber = '1';
+    }
+    else {
+        loadingNumber = `${Number.parseInt(loadingNumber) + 1}`;
+    }
+    resolved.parent.setAttribute('loading-number', loadingNumber);
+    resolved.parent.appendChild(instance.$el);
+    // after instance render, then modify visible to trigger transition
+    nextTick(() => (instance.visible.value = resolved.visible));
+    if (resolved.fullscreen) {
+        fullscreenInstance = instance;
+    }
+    return instance;
+};
+exports.Loading = Loading;
+const resolveOptions = (options) => {
+    var _a, _b, _c, _d;
+    let target;
+    if (isString(options.target)) {
+        target =
+            (_a = document.querySelector(options.target)) !== null && _a !== void 0 ? _a : document.body;
+    }
+    else {
+        target = options.target || document.body;
+    }
+    return {
+        parent: target === document.body || options.body ? document.body : target,
+        background: options.background || '',
+        svg: options.svg || '',
+        svgViewBox: options.svgViewBox || '',
+        spinner: options.spinner || false,
+        text: options.text || '',
+        fullscreen: target === document.body && ((_b = options.fullscreen) !== null && _b !== void 0 ? _b : true),
+        lock: (_c = options.lock) !== null && _c !== void 0 ? _c : false,
+        customClass: options.customClass || '',
+        visible: (_d = options.visible) !== null && _d !== void 0 ? _d : true,
+        beforeClose: options.beforeClose,
+        closed: options.closed,
+        target,
+    };
+};
+const addStyle = (options, parent, instance) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    // Compatible with the instance data format of vue@3.2.12 and earlier versions #12351
+    const { nextZIndex } = instance.vm.zIndex ||
+        instance.vm._.exposed.zIndex;
+    const maskStyle = {};
+    if (options.fullscreen) {
+        instance.originalPosition.value = getStyle(document.body, 'position');
+        instance.originalOverflow.value = getStyle(document.body, 'overflow');
+        maskStyle.zIndex = nextZIndex();
+    }
+    else if (options.parent === document.body) {
+        instance.originalPosition.value = getStyle(document.body, 'position');
+        /**
+         * await dom render when visible is true in init,
+         * because some component's height maybe 0.
+         * e.g. el-table.
+         */
+        yield nextTick();
+        for (const property of ['top', 'left']) {
+            const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+            maskStyle[property] = `${options.target.getBoundingClientRect()[property] +
+                document.body[scroll] +
+                document.documentElement[scroll] -
+                Number.parseInt(getStyle(document.body, `margin-${property}`), 10)}px`;
+        }
+        for (const property of ['height', 'width']) {
+            maskStyle[property] = `${options.target.getBoundingClientRect()[property]}px`;
+        }
+    }
+    else {
+        instance.originalPosition.value = getStyle(parent, 'position');
+    }
+    for (const [key, value] of Object.entries(maskStyle)) {
+        instance.$el.style[key] = value;
+    }
+});
+const addClassList = (options, parent, instance) => {
+    // Compatible with the instance data format of vue@3.2.12 and earlier versions #12351
+    const ns = instance.vm.ns ||
+        instance.vm._.exposed.ns;
+    if (!['absolute', 'fixed', 'sticky'].includes(instance.originalPosition.value)) {
+        addClass(parent, ns.bm('parent', 'relative'));
+    }
+    else {
+        removeClass(parent, ns.bm('parent', 'relative'));
+    }
+    if (options.fullscreen && options.lock) {
+        addClass(parent, ns.bm('parent', 'hidden'));
+    }
+    else {
+        removeClass(parent, ns.bm('parent', 'hidden'));
+    }
+};

package/src/components/feedback/td-loading/style/css.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-loading.css';

package/src/components/feedback/td-loading/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-loading.css");

package/src/components/feedback/td-loading/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/loading.scss';

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

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

package/src/components/feedback/td-loading/types.d.ts

@@ -0,0 +1,47 @@
+import { MaybeRef } from '@type-dom/signals';
+export type LoadingOptionsResolved = {
+    parent: LoadingParentElement;
+    /**
+     * @description background color of the mask
+     */
+    background: MaybeRef<string>;
+    svg: MaybeRef<string>;
+    svgViewBox: MaybeRef<string>;
+    /**
+     * @description class name of the custom spinner
+     */
+    spinner: MaybeRef<boolean | string>;
+    /**
+     * @description loading text that displays under the spinner
+     */
+    text: MaybeRef<string>;
+    /**
+     * @description same as the `fullscreen` modifier of `v-loading`
+     */
+    fullscreen: boolean;
+    /**
+     * @description same as the `lock` modifier of `v-loading`
+     */
+    lock: boolean;
+    /**
+     * @description custom class name for Loading
+     */
+    customClass: MaybeRef<string>;
+    visible: boolean;
+    target: HTMLElement;
+    beforeClose?: () => boolean;
+    closed?: () => void;
+};
+export type LoadingOptions = Partial<Omit<LoadingOptionsResolved, 'parent' | 'target'> & {
+    /**
+     * @description the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node
+     */
+    target: HTMLElement | string;
+    /**
+     * @description same as the `body` modifier of `v-loading`
+     */
+    body: boolean;
+}>;
+export interface LoadingParentElement extends HTMLElement {
+    vLoadingAddClassList?: () => void;
+}

package/src/components/feedback/td-loading/types.js

@@ -0,0 +1,3 @@
+"use strict";
+// import type { MaybeRef } from '@vueuse/core'
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+import { Signal } from '@type-dom/signals';
+import { MessageContext } from './td-message.interface';
+export declare const instances: Signal<MessageContext[]>;
+export declare const getInstance: (id: string) => {
+    current: MessageContext;
+    prev: MessageContext | undefined;
+};
+export declare const getLastOffset: (id: string) => number;
+export declare const getOffsetOrSpace: (id: string, offset: number) => number;

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

@@ -0,0 +1,35 @@
+"use strict";
+// import { shallowReactive } from 'vue'
+// import type { ComponentInternalInstance, VNode } from 'vue'
+// import type { Mutable } from '@element-plus/utils'
+// import type { MessageHandler, MessageProps } from './message'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOffsetOrSpace = exports.getLastOffset = exports.getInstance = exports.instances = void 0;
+const signals_1 = require("@type-dom/signals");
+exports.instances = (0, signals_1.signal)([]);
+const getInstance = (id) => {
+    // console.warn('getInstance, id is ', id);
+    const idx = exports.instances.get().findIndex((instance) => instance.id === id);
+    const current = exports.instances.get()[idx];
+    let prev;
+    if (idx > 0) {
+        prev = exports.instances.get()[idx - 1];
+    }
+    return { current, prev };
+};
+exports.getInstance = getInstance;
+const getLastOffset = (id) => {
+    // console.warn('getLastOffset, id is ', id);
+    const { prev } = (0, exports.getInstance)(id);
+    if (!prev)
+        return 0;
+    // return prev.vm.exposed!.bottom.value
+    return prev.vnode.bottom.get();
+};
+exports.getLastOffset = getLastOffset;
+const getOffsetOrSpace = (id, offset) => {
+    // console.warn('getOffsetOrSpace, id is ', id);
+    const idx = exports.instances.get().findIndex((instance) => instance.id === id);
+    return idx > 0 ? 16 : offset;
+};
+exports.getOffsetOrSpace = getOffsetOrSpace;

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

@@ -0,0 +1,5 @@
+import { IMessageType, Message, MessageContext, MessageFn } from './td-message.interface';
+export declare const closeMessage: (instance: MessageContext) => void;
+declare const message: MessageFn & Partial<Message>;
+export declare function closeAll(type?: IMessageType): void;
+export { message as TdMessage };

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

@@ -0,0 +1,190 @@
+"use strict";
+// import { createVNode, isVNode, render } from 'vue'
+// import {
+//   debugWarn,
+//   isBoolean,
+//   isClient,
+//   isElement,
+//   isFunction,
+//   isNumber,
+//   isString,
+// } from '@element-plus/utils'
+// import { messageConfig } from '@element-plus/components/config-provider'
+// import MessageConstructor from './message.vue'
+// import { messageDefaults, messageTypes } from './message'
+// import { instances } from './instance'
+//
+// import type { MessageContext } from './instance'
+// import type { AppContext } from 'vue'
+// import type {
+//   Message,
+//   MessageFn,
+//   MessageHandler,
+//   MessageOptions,
+//   MessageParams,
+//   MessageParamsNormalized,
+//   messageType,
+// } from './message'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMessage = exports.closeMessage = void 0;
+exports.closeAll = closeAll;
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const config_provider_1 = require("../../configuration/td-config-provider/config-provider");
+const td_message_const_1 = require("./td-message.const");
+const td_message_class_1 = require("./td-message.class");
+const instance_1 = require("./instance");
+let seed = 1;
+// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.
+const normalizeOptions = (params /* | (() => TypeNode)MessageParams*/) => {
+    const options = !params || (0, utils_1.isString)(params) || (0, framework_1.isVNode)(params) || (0, utils_1.isFunction)(params)
+        ? { message: params }
+        : params;
+    const normalized = Object.assign(Object.assign({}, td_message_const_1.messageDefaults), options);
+    if (!normalized.appendTo) {
+        normalized.appendTo = document.body;
+    }
+    else if ((0, utils_1.isString)(normalized.appendTo)) {
+        let appendTo = document.querySelector(normalized.appendTo);
+        // should fallback to default value with a warning
+        if (!(0, utils_1.isElement)(appendTo)) {
+            (0, utils_1.debugWarn)('TdMessage', 'the appendTo option is not an HTMLElement. Falling back to document.body.');
+            appendTo = document.body;
+        }
+        // console.error('appendTo is ', appendTo);
+        normalized.appendTo = appendTo;
+    }
+    // When grouping is configured globally,
+    // if grouping is manually set when calling message individually and it is not equal to the default value,
+    // the global configuration cannot override the current setting. default => false
+    // 先添加 config-provider组件；
+    if ((0, utils_1.isBoolean)(config_provider_1.messageConfig.grouping) && !normalized.grouping) {
+        normalized.grouping = config_provider_1.messageConfig.grouping;
+    }
+    if ((0, utils_1.isNumber)(config_provider_1.messageConfig.duration) && normalized.duration === 3000) {
+        normalized.duration = config_provider_1.messageConfig.duration;
+    }
+    if ((0, utils_1.isNumber)(config_provider_1.messageConfig.offset) && normalized.offset === 16) {
+        normalized.offset = config_provider_1.messageConfig.offset;
+    }
+    if ((0, utils_1.isBoolean)(config_provider_1.messageConfig.showClose) && !normalized.showClose) {
+        normalized.showClose = config_provider_1.messageConfig.showClose;
+    }
+    return normalized;
+};
+const closeMessage = (instance) => {
+    const idx = instance_1.instances.get().indexOf(instance);
+    if (idx === -1)
+        return;
+    instance_1.instances.get().splice(idx, 1);
+    const { handler } = instance;
+    handler.close();
+};
+exports.closeMessage = closeMessage;
+const createMessage = (_a) => {
+    var { appendTo } = _a, options = tslib_1.__rest(_a, ["appendTo"]);
+    const id = `message_${seed++}`;
+    const userOnClose = options.onClose;
+    // let container: HTMLElement;
+    const props = Object.assign(Object.assign({}, options), { 
+        // now the zIndex will be used inside the message.vue component instead of here.
+        // zIndex: nextIndex() + options.zIndex
+        id, onClose: () => {
+            // console.error('createMessage props onClose ');
+            userOnClose === null || userOnClose === void 0 ? void 0 : userOnClose();
+            (0, exports.closeMessage)(instance);
+        }, emits: {
+            // clean message element preventing mem leak
+            destroy: () => {
+                // todo not trigger
+                // since the element is destroy, then the VNode should be collected by GC as well
+                // we do not want cause any mem leak because we have returned vm as a reference to users
+                // so that we manually set it to false.
+                // render(null, container)
+                // container?.remove();
+                vnode.unmount();
+            },
+        } });
+    const vnode = new td_message_class_1.MessageClass(props
+    // isFunction(props.message) || isVNode(props.message)
+    //   ? {
+    //       default: isFunction(props.message)
+    //         ? props.message
+    //         : () => props.message,
+    //     }
+    //   : null
+    );
+    // vnode.appContext = context || message._context
+    //
+    // render(vnode, container)
+    // vnode.mount(container);
+    // instances will remove this item when close function gets called. So we do not need to worry about it.
+    // appendTo.appendChild(container.firstElementChild!)
+    // vnode.mount(appendTo);  // this can trigger TdMessage setup method, then compute instances array will not have this node.
+    // container = vnode.downRealElement?.dom as HTMLElement;
+    // const vm = vnode.component!
+    const handler = {
+        // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
+        // for out component, so that all closing steps will not be skipped.
+        close: () => {
+            var _a;
+            (_a = vnode.visible) === null || _a === void 0 ? void 0 : _a.set(false);
+        },
+    };
+    const instance = {
+        id,
+        vnode,
+        handler,
+        props: vnode.props,
+    };
+    // todo 为啥不能直接是 TdMessage 的实例；
+    return instance;
+};
+const message = (options = {}) => {
+    var _a, _b, _c, _d;
+    // console.log('message options is ', options);
+    if (!utils_1.isClient)
+        return { close: () => undefined };
+    const normalized = normalizeOptions(options);
+    // console.error('normalized is ', normalized);
+    if (normalized.grouping && instance_1.instances.get().length) {
+        const instance = instance_1.instances
+            .get()
+            .find(({ vnode }) => { var _a; return ((_a = vnode.props) === null || _a === void 0 ? void 0 : _a.message) === normalized.message; });
+        if (instance) {
+            // instance.props.repeatNum += 1
+            (_a = instance.props.repeatNum) === null || _a === void 0 ? void 0 : _a.set(((_c = (_b = instance.props.repeatNum) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : 0) + 1);
+            instance.props.type = normalized.type;
+            return instance.handler;
+        }
+    }
+    if ((0, utils_1.isNumber)(config_provider_1.messageConfig.max) &&
+        instance_1.instances.get().length >= config_provider_1.messageConfig.max) {
+        return { close: () => undefined };
+    }
+    (_d = normalized.repeatNum) === null || _d === void 0 ? void 0 : _d.set(1); // add by me 恢复重复数字
+    const instance = createMessage(normalized);
+    instance_1.instances.get().push(instance);
+    console.log('message instance then mount appendTo is  ', normalized.appendTo);
+    instance.vnode.mount(normalized.appendTo); // add by me
+    console.log('instance.vnode is ', instance.vnode);
+    // instance.vnode.recurseRender(); // todo 缺少 setup hook；
+    // normalized.appendTo.appendChild(instance.vnode.dom!);
+    return instance.handler;
+};
+exports.TdMessage = message;
+td_message_const_1.messageTypes.forEach((type) => {
+    message[type] = (options = {}) => {
+        const normalized = normalizeOptions(options);
+        return message(Object.assign(Object.assign({}, normalized), { type }));
+    };
+});
+function closeAll(type) {
+    for (const instance of instance_1.instances.get()) {
+        if (!type || type === instance.props.type) {
+            instance.handler.close();
+        }
+    }
+}
+message.closeAll = closeAll;

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

@@ -0,0 +1,3 @@
+import '../../../base/style/css';
+import '@element-plus/components/badge/style/css';
+import '@element-plus/theme-chalk/el-message.css';

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

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

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

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../components/data/td-badge/style';
+import '../../../../theme-chalk/message.scss';