@type-dom/ui 0.1.0 → 0.1.2

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

@@ -1,36 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMessageBox = void 0;
+const tslib_1 = require("tslib");
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const svgs_1 = require("@type-dom/svgs");
+const use_lockscreen_1 = require("../../../hooks/use-lockscreen");
+const use_same_target_1 = require("../../../hooks/use-same-target");
+const use_id_1 = require("../../../hooks/use-id");
+const td_config_provider_1 = require("../../configuration/td-config-provider");
+const use_draggable_1 = require("../../../hooks/use-draggable");
 const td_button_class_1 = require("../../basic/td-button/td-button.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_input_class_1 = require("../../form/td-input/td-input.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
-const td_message_box_style_1 = require("./td-message-box.style");
+const td_focus_trap_class_1 = require("../td-focus-trap/td-focus-trap.class");
+const td_message_box_const_1 = require("./td-message-box.const");
+require("./style/index");
 class TdMessageBox extends framework_1.TypeFragment {
     constructor(params = {}) {
-        var _a, _b;
         super();
-        // 作为参数调用要用箭头函数
-        this.handleWrapperClick = () => {
-            if (this.props.closeOnClickModal) {
-                this.handleAction(this.state.distinguishCancelAndClose ? 'close' : 'cancel');
-            }
-        };
-        this.handleInputEnter = (e) => {
-            if (this.state.inputType !== 'textarea') {
-                e.preventDefault();
-                return this.handleAction('confirm');
-            }
-        };
         this.className = 'TdMessageBox';
-        (0, td_message_box_style_1.useStyle)(params);
-        // const zIndex = useZIndex();
-        this.visible = true;
+        this.assignProps(td_message_box_const_1.messageBoxProps);
+        // console.warn('params is ', params);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const emit = this.emit;
+        // const popup = usePopup(props, doClose)
+        const { locale, zIndex, ns, size: btnSize, } = (0, td_config_provider_1.useGlobalComponentSettings)('message-box', (0, signals_1.computed)(() => props.buttonSize));
+        const { t } = locale;
+        const { nextZIndex } = zIndex;
+        const visible = (0, signals_1.signal)(false);
         // s represents state
-        this.state = {
+        const state = Object.assign({
             // autofocus element when open message-box
             autofocus: true,
             beforeClose: undefined,
@@ -43,11 +48,11 @@ class TdMessageBox extends framework_1.TypeFragment {
             customStyle: {},
             dangerouslyUseHTMLString: false,
             distinguishCancelAndClose: false,
-            icon: undefined,
+            // icon: '',
             inputPattern: undefined,
             inputPlaceholder: '',
             inputType: 'text',
-            inputValue: undefined, // null
+            inputValue: (0, signals_1.signal)(undefined),
             inputValidator: undefined,
             inputErrorMessage: '',
             message: undefined,
@@ -61,453 +66,442 @@ class TdMessageBox extends framework_1.TypeFragment {
             action: '',
             confirmButtonLoading: false,
             cancelButtonLoading: false,
-            // confirmButtonLoadingIcon: markRaw(Loading),
-            // cancelButtonLoadingIcon: markRaw(Loading),
+            confirmButtonLoadingIcon: new svgs_1.ElLoadingSvg(), // markRaw(Loading),
+            cancelButtonLoadingIcon: new svgs_1.ElLoadingSvg(), // markRaw(Loading),
             confirmButtonDisabled: false,
-            editorErrorMessage: '',
+            editorErrorMessage: (0, signals_1.signal)(''),
             // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed
             // seemed ok for now without this state.
-            isOnComposition: false, // temporary remove
+            // isOnComposition: false, // temporary remove
             validateError: false,
-            zIndex: 2000, // todo nextZIndex(),
-        };
-        // Object.assign(this.state, params); // todo this.state params 关系？？？
-        this.to = this.getAppendToElement(params);
-        this.messageBox = new framework_1.Div({
-            name: 'message-box',
-            attrObj: {
-                tabindex: '-1',
-            },
-            styleObj: td_message_box_style_1.$messageBoxStyle,
-            events: {
-                click: (evt) => {
-                    evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
-                },
-            },
+            zIndex: nextZIndex(),
+        }, props);
+        const typeClass = (0, signals_1.computed)(() => {
+            const type = state.type;
+            return { [ns.bm('icon', type)]: type && svgs_1.TypeComponentsMap[type] };
         });
-        this.dialog = new framework_1.Div({
-            name: 'message-box-overlay',
-            childNodes: [this.messageBox], // 有问题， Div 不能直接用slot
-            attrObj: {
-                role: 'dialog',
-                'aria-modal': 'true',
-                'aria-label': 'dialog',
-                'aria-describedby': 'message-box-container',
-                'aria-labelledby': 'message-box-title',
-            },
-            styleObj: Object.assign(Object.assign({}, td_message_box_style_1.$messageBoxOverlayStyle), { display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }),
-            events: {
-                click: (evt) => this.overlayEvent.onClick(evt),
-                mousedown: (evt) => this.overlayEvent.onMousedown(evt),
-                mouseup: (evt) => this.overlayEvent.onMouseup(evt),
-            },
-        });
-        // this.dialog.addChild(this.messageBox);
-        this.overlay = new td_overlay_class_1.TdOverlay({
-            name: 'overlay',
-            // styleObj: $messageBoxStyle,
-            slot: this.dialog,
-        });
-        this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
-        this.content = new framework_1.Transition({
-            name: 'fade-in-linear',
-            emits: {
-                afterLeave: () => {
-                    // params?.emits?.vanish?.();
-                    this.emit('vanish');
-                },
-            },
-            slot: this.overlay,
-        });
-        this.addChild(this.content);
-        let iconComponent;
-        if (params === null || params === void 0 ? void 0 : params.icon) {
-            iconComponent = params.icon;
-        }
-        else if ((params === null || params === void 0 ? void 0 : params.type) && svgs_1.TypeComponentsMap[params.type]) {
-            iconComponent = new svgs_1.TypeComponentsMap[params.type]();
-        }
-        if (params === null || params === void 0 ? void 0 : params.title) {
-            this.header = new framework_1.Div({
-                name: 'header',
-                styleObj: td_message_box_style_1.$messageBoxHeaderStyle,
-            });
-            this.messageBox.addChild(this.header);
-            this.title = new framework_1.Div({
-                name: 'title',
-                styleObj: td_message_box_style_1.$messageBoxTitleStyle,
-            });
-            this.header.addChild(this.title);
-            if (iconComponent && params.center) {
-                this.title.addChild(new td_icon_class_1.TdIcon({
-                    name: 'icon',
-                    styleObj: td_message_box_style_1.$messageBoxStatusStyle,
-                    svgObj: iconComponent,
-                }));
-            }
-            this.title.addChild(new framework_1.TextNode(params.title));
-            if (params.showClose !== false) {
-                (_a = this.header) === null || _a === void 0 ? void 0 : _a.addChild(new td_button_class_1.TdButton({
-                    styleObj: td_message_box_style_1.$messageBoxHeaderBtnStyle,
-                    svgObj: new svgs_1.ElCloseSvg(),
-                    events: {
-                        click: () => {
-                            this.handleClose();
-                        },
-                        keydown: (evt) => {
-                            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                            if (evt.key === 'Enter') {
-                                this.handleClose();
-                            }
-                        },
-                    },
-                    slots: {
-                        icon: new svgs_1.ElCloseSvg(),
-                    },
-                    // childNodes: [
-                    //   new TdIcon({
-                    //     name: 'close',
-                    //     styleObj: $messageBoxHeaderCloseStyle,
-                    //     svgObj: new ElCloseSvg(),
-                    //   })
-                    // ]
-                }));
+        const contentId = (0, use_id_1.useId)();
+        const inputId = (0, use_id_1.useId)();
+        const iconComponent = (0, signals_1.computed)(() => state.icon || (state.type && svgs_1.TypeComponentsMap[state.type]) || '');
+        const hasMessage = (0, signals_1.computed)(() => !!state.message);
+        const rootRef = (0, signals_1.signal)();
+        const headerRef = (0, signals_1.signal)();
+        const focusStartRef = (0, signals_1.signal)();
+        const inputRef = (0, signals_1.signal)();
+        const confirmRef = (0, signals_1.signal)();
+        const confirmButtonClasses = (0, signals_1.computed)(() => state.confirmButtonClass);
+        (0, signals_1.watch)(() => { var _a; return (_a = state.inputValue) === null || _a === void 0 ? void 0 : _a.get(); }, (val) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            yield (0, framework_1.nextTick)();
+            // console.log('watch state.inputValue , val is ', val);
+            if (props.boxType === 'prompt' && val !== undefined) {
+                validate();
             }
-        }
-        this.msgContent = new framework_1.Div({
-            name: 'msg-content',
-            styleObj: td_message_box_style_1.$messageBoxContentStyle,
-        });
-        this.messageBox.addChild(this.msgContent);
-        this.container = new framework_1.Div({
-            name: 'message-box-container',
-            styleObj: td_message_box_style_1.$messageBoxContainerStyle,
-        });
-        const hasMessage = !!(params === null || params === void 0 ? void 0 : params.message);
-        if (iconComponent && !(params === null || params === void 0 ? void 0 : params.center) && hasMessage) {
-            this.container.addChild(new td_icon_class_1.TdIcon({
-                name: 'status',
-                styleObj: td_message_box_style_1.$messageBoxStatusStyle,
-                svgObj: iconComponent,
-            }));
-        }
-        if (hasMessage) {
-            this.msgDiv = new framework_1.Div({
-                name: 'message',
-            });
-            this.container.addChild(this.msgDiv);
-            this.msgDiv.addChild(this.getSlotNode());
-            if (params === null || params === void 0 ? void 0 : params.slot) {
-                //
-            }
-            else {
-                if (!(params === null || params === void 0 ? void 0 : params.dangerouslyUseHTMLString)) {
-                    if (params === null || params === void 0 ? void 0 : params.showInput) {
-                        if (typeof (params === null || params === void 0 ? void 0 : params.message) === 'string') {
-                            this.getSlotNode().resetSlot(new framework_1.Label({
-                                name: 'label',
-                                text: params.message || '',
-                            }));
-                        }
-                        else if (params.message instanceof framework_1.TypeElement) {
-                            this.getSlotNode().resetSlot(new framework_1.Label({
-                                name: 'label',
-                                childNodes: [params.message],
-                            }));
-                        }
-                        else {
-                            console.warn('message must be a string or a TypeElement');
-                        }
+        }), { immediate: true });
+        (0, signals_1.watch)(() => visible.get(), (val) => {
+            var _a, _b, _c;
+            if (val) {
+                if (props.boxType !== 'prompt') {
+                    if (state.autofocus) {
+                        focusStartRef.set((_b = (_a = confirmRef.get()) === null || _a === void 0 ? void 0 : _a.dom) !== null && _b !== void 0 ? _b : rootRef.get());
                     }
                     else {
-                        if (typeof (params === null || params === void 0 ? void 0 : params.message) === 'string') {
-                            this.getSlotNode().resetSlot(new framework_1.P({
-                                name: 'paragraph',
-                                text: params.message || '',
-                            }));
-                        }
-                        else if ((params === null || params === void 0 ? void 0 : params.message) instanceof framework_1.TypeElement) {
-                            this.getSlotNode().resetSlot(new framework_1.P({
-                                name: 'paragraph',
-                                childNodes: [params.message],
-                            }));
-                        }
-                        else {
-                            console.warn('message must be a string or a TypeElement');
-                        }
+                        focusStartRef.set(rootRef.get());
                     }
                 }
-                else {
-                    if (typeof params.message === 'string') {
-                        const parser = new framework_1.Parser();
-                        const element = parser.parseFromString(params.message);
-                        if (params === null || params === void 0 ? void 0 : params.showInput) {
-                            this.getSlotNode().resetSlot(new framework_1.Label({
-                                name: 'label',
-                                childNodes: [element],
-                            }));
+                state.zIndex = nextZIndex();
+            }
+            if (props.boxType !== 'prompt')
+                return;
+            if (val) {
+                (0, framework_1.nextTick)().then(() => {
+                    var _a, _b;
+                    if (inputRef.get() && ((_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.dom)) {
+                        if (state.autofocus) {
+                            focusStartRef.set((_b = getInputElement()) !== null && _b !== void 0 ? _b : rootRef.get());
                         }
                         else {
-                            this.getSlotNode().resetSlot(new framework_1.P({
-                                name: 'paragraph',
-                                childNodes: [element],
-                            }));
+                            focusStartRef.set(rootRef.get());
                         }
                     }
-                    else {
-                        console.warn('message must be a string');
-                    }
-                }
+                });
+            }
+            else {
+                (_c = state.editorErrorMessage) === null || _c === void 0 ? void 0 : _c.set('');
+                state.validateError = false;
             }
-        }
-        this.msgContent.addChild(this.container);
-        if (params === null || params === void 0 ? void 0 : params.showInput) {
-            this.input = new td_input_class_1.TdInput({
-                // id: params.inputId,
-                type: params.inputType || 'text',
-                placeholder: params.inputPlaceholder,
-                // ariaInvalid: this.state.validateError,
-                events: {
-                    keydown: (evt) => {
-                        if (evt.key === 'Enter') {
-                            this.handleInputEnter(evt);
-                        }
-                    },
-                },
-            });
-            this.errorMsg = new framework_1.Div({
-                name: 'error-message',
-                styleObj: Object.assign({}, td_message_box_style_1.$messageBoxErrorMsgStyle),
-                childNodes: [new framework_1.TextNode(this.state.editorErrorMessage)],
-            });
-            this.errorMsg.textNode = this.errorMsg.childNodes[0];
-            this.inputDiv = new framework_1.Div({
-                name: 'input-div',
-                styleObj: td_message_box_style_1.$messageBoxInputStyle,
-                childNodes: [this.input, this.errorMsg],
-            });
-            this.msgContent.addChild(this.inputDiv);
-        }
-        this.btns = new framework_1.Div({
-            name: 'btns',
-            styleObj: td_message_box_style_1.$messageBoxBtnsStyle,
-        });
-        this.messageBox.addChild(this.btns);
-        if (params === null || params === void 0 ? void 0 : params.showCancelButton) {
-            this.cancelBtn = new td_button_class_1.TdButton({
-                name: 'cancel-btn',
-                // size: params.btnSize,
-                // loading: params.cancelButtonLoading,
-                loadingIcon: params.cancelButtonLoadingIcon,
-                slot: params.cancelButtonText || 'Cancel',
-                round: params.roundButton,
-                // styleObj: $messageBoxCancelBtnStyle,
-                events: {
-                    click: () => {
-                        console.log('this.cancelBtn click . ');
-                        this.handleAction('cancel');
-                        this.resolve({ action: 'cancel' });
-                    },
-                    keydown: (evt) => {
-                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                            this.handleAction('cancel');
-                            this.resolve({ action: 'cancel' });
-                        }
-                    }
-                },
-            });
-            this.btns.addChild(this.cancelBtn);
-        }
-        this.confirmBtn = new td_button_class_1.TdButton({
-            name: 'confirm-btn',
-            type: 'primary',
-            // loading: params.confirmButtonLoading,
-            loadingIcon: params === null || params === void 0 ? void 0 : params.confirmButtonLoadingIcon,
-            slot: (params === null || params === void 0 ? void 0 : params.confirmButtonText) || 'OK',
-            round: params === null || params === void 0 ? void 0 : params.roundButton,
-            // styleObj: $messageBoxConfirmBtnStyle,
-            styleObj: {
-                marginLeft: '12px',
-            },
-            events: {
-                click: () => {
-                    this.handleAction('confirm');
-                    const input = this.input;
-                    this.resolve({ action: 'confirm', input });
-                },
-                keydown: (evt, element) => {
-                    evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                        this.handleAction('confirm');
-                        const input = this.input;
-                        this.resolve({ action: 'confirm', input });
-                    }
-                },
-            },
         });
-        this.btns.addChild(this.confirmBtn);
-        this.props = this.useParams(params);
-        const draggable = params === null || params === void 0 ? void 0 : params.draggable;
-        const overflow = params === null || params === void 0 ? void 0 : params.overflow;
-        const { onDraggable, offDraggable } = (0, framework_1.useDraggable)(this.messageBox.dom, (_b = this.header) === null || _b === void 0 ? void 0 : _b.dom, draggable, overflow);
-        this.onDraggable = onDraggable;
-        this.offDraggable = offDraggable;
-        this.mount(this.to);
-    }
-    mounted() {
-        var _a;
-        if (this.props.draggable) {
-            (_a = this.onDraggable) === null || _a === void 0 ? void 0 : _a.call(this);
-        }
-        else {
-            this.offDraggable();
-        }
-    }
-    beforeDestroy() {
-        this.offDraggable();
-    }
-    // onMounted(() => {
-    //     watchEffect(() => {
-    //       if (draggable.value) {
-    //         onDraggable()
-    //       } else {
-    //         offDraggable()
-    //       }
-    //     })
-    //   })
-    //
-    //   onBeforeUnmount(() => {
-    //     offDraggable()
-    //   })
-    // 普通显示
-    static info(params) {
-        console.log('TdMessageBox show params is ', params);
-        return new TdMessageBox(params);
-    }
-    // 用 callback
-    static alert(message, title, params) {
-        new TdMessageBox(Object.assign({ boxType: 'alert', message,
-            title }, params));
-    }
-    static confirm(message, title, params) {
-        return new TdMessageBox(Object.assign({ boxType: 'confirm', message,
-            title, showCancelButton: true }, params));
-    }
-    // todo 多次提交时，不触发返回操作。
-    static prompt(message, title, params) {
-        return new TdMessageBox(Object.assign({ boxType: 'prompt', message,
-            title, showCancelButton: true, showInput: true }, params));
-    }
-    doClose() {
-        console.log('doClose . ');
-        if (!this.visible) {
-            return;
-        }
-        this.visible = false;
-        this.messageBox.style.hide();
-        (0, framework_1.nextTick)(() => {
-            if (this.state.action) {
-                this.emit('action', this.state.action);
-                // this.props.emits?.action?.(this.state.action);
-                this.destroy();
+        const draggable = (0, signals_1.computed)(() => props.draggable);
+        const overflow = (0, signals_1.computed)(() => props.overflow);
+        (0, use_draggable_1.useDraggable)(rootRef, headerRef, draggable, overflow);
+        (0, framework_1.onMounted)(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            yield (0, framework_1.nextTick)();
+            if (props.closeOnHashChange) {
+                window.addEventListener('hashchange', doClose);
+            }
+        }));
+        (0, framework_1.onBeforeUnmount)(() => {
+            if (props.closeOnHashChange) {
+                window.removeEventListener('hashchange', doClose);
             }
         });
-    }
-    handleAction(action) {
-        var _a, _b, _c;
-        console.log('handleAction', action);
-        if (this.props.boxType === 'prompt' &&
-            action === 'confirm' &&
-            !this.validate()) {
-            return;
-        }
-        ((_a = this.props) === null || _a === void 0 ? void 0 : _a.callback) && this.props.callback(action);
-        this.state.action = action;
-        if (this.state.beforeClose) {
-            (_c = (_b = this.state).beforeClose) === null || _c === void 0 ? void 0 : _c.call(_b, action, this.state, this.doClose);
-        }
-        else {
-            this.doClose();
+        function doClose() {
+            if (!visible.get())
+                return;
+            visible.set(false);
+            (0, framework_1.nextTick)(() => {
+                if (state.action)
+                    emit('action', state.action);
+            });
         }
-    }
-    validate() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (this.props.boxType === 'prompt') {
-            console.log('validate . ');
-            const inputPattern = this.props.inputPattern;
-            if (inputPattern && !inputPattern.test(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '')) {
-                this.state.editorErrorMessage = this.props.inputErrorMessage; // || t('el.messagebox.error') todo t 是国际化翻译的全局方法
-                this.state.validateError = true;
-                (_b = this.errorMsg) === null || _b === void 0 ? void 0 : _b.style.setObj({
-                    visibility: this.state.editorErrorMessage ? 'visible' : 'hidden',
-                });
-                (_d = (_c = this.errorMsg) === null || _c === void 0 ? void 0 : _c.textNode) === null || _d === void 0 ? void 0 : _d.setText(this.state.editorErrorMessage || '');
-                return false;
+        const handleWrapperClick = () => {
+            if (props.closeOnClickModal) {
+                handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel');
+            }
+        };
+        const overlayEvent = (0, use_same_target_1.useSameTarget)(handleWrapperClick);
+        const handleInputEnter = (e) => {
+            if (state.inputType !== 'textarea') {
+                e.preventDefault();
+                return handleAction('confirm');
             }
-            const inputValidator = this.state.inputValidator;
-            if (typeof inputValidator === 'function') {
-                const validateResult = inputValidator((_e = this.input) === null || _e === void 0 ? void 0 : _e.value);
-                if (validateResult === false) {
-                    this.state.editorErrorMessage = this.props.inputErrorMessage; // || t('el.messagebox.error')
-                    this.state.validateError = true;
-                    (_f = this.errorMsg) === null || _f === void 0 ? void 0 : _f.style.setObj({
-                        visibility: this.state.editorErrorMessage ? 'visible' : 'hidden',
-                    });
-                    (_h = (_g = this.errorMsg) === null || _g === void 0 ? void 0 : _g.textNode) === null || _h === void 0 ? void 0 : _h.setText(this.state.editorErrorMessage || '');
+        };
+        const handleAction = (action) => {
+            var _a;
+            console.error('handleAction . action is ', action);
+            if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {
+                return;
+            }
+            state.action = action;
+            if (state.beforeClose) {
+                (_a = state.beforeClose) === null || _a === void 0 ? void 0 : _a.call(state, action, state, doClose);
+            }
+            else {
+                doClose();
+            }
+        };
+        const validate = () => {
+            var _a, _b, _c, _d, _e, _f;
+            console.error('validate . state.editorErrorMessage is ', state.editorErrorMessage);
+            if (props.boxType === 'prompt') {
+                const inputPattern = state.inputPattern;
+                if (inputPattern && !inputPattern.test(((_a = state.inputValue) === null || _a === void 0 ? void 0 : _a.get()) || '')) {
+                    (_b = state.editorErrorMessage) === null || _b === void 0 ? void 0 : _b.set(state.inputErrorMessage || t('el.messagebox.error'));
+                    state.validateError = true;
                     return false;
                 }
-                if (typeof validateResult === 'string') {
-                    this.state.editorErrorMessage = validateResult;
-                    this.state.validateError = true;
-                    (_j = this.errorMsg) === null || _j === void 0 ? void 0 : _j.style.setObj({
-                        visibility: this.state.editorErrorMessage ? 'visible' : 'hidden',
-                    });
-                    (_l = (_k = this.errorMsg) === null || _k === void 0 ? void 0 : _k.textNode) === null || _l === void 0 ? void 0 : _l.setText(this.state.editorErrorMessage || '');
-                    return false;
+                const inputValidator = state.inputValidator;
+                if ((0, utils_1.isFunction)(inputValidator)) {
+                    const validateResult = inputValidator((_c = state.inputValue) === null || _c === void 0 ? void 0 : _c.get());
+                    if (validateResult === false) {
+                        (_d = state.editorErrorMessage) === null || _d === void 0 ? void 0 : _d.set(state.inputErrorMessage || t('el.messagebox.error'));
+                        state.validateError = true;
+                        return false;
+                    }
+                    if ((0, utils_1.isString)(validateResult)) {
+                        (_e = state.editorErrorMessage) === null || _e === void 0 ? void 0 : _e.set(validateResult);
+                        state.validateError = true;
+                        return false;
+                    }
                 }
             }
-        }
-        this.state.editorErrorMessage = '';
-        this.state.validateError = false;
-        return true;
-    }
-    getInputElement() {
-        var _a;
-        // const inputRefs = this.input;
-        // return (inputRefs?.input || inputRefs?.textarea) as HTMLElement
-        return (_a = this.input) === null || _a === void 0 ? void 0 : _a.panel.inner.dom;
-    }
-    handleClose() {
-        this.handleAction('close');
-    }
-    // when close on press escape is disabled, pressing esc should not callout
-    // any other message box and close any other dialog-ish elements
-    // e.g. Dialog has a close on press esc feature, and when it closes, it calls
-    // props.beforeClose method to make a intermediate state by callout a message box
-    // for some verification or alerting. then if we allow global event liek this
-    // to dispatch, it could callout another message box.
-    onCloseRequested() {
-        if (this.props.closeOnPressEscape) {
-            this.handleClose();
-        }
-    }
-    getAppendToElement(props) {
-        let appendTo = document.body;
-        if (props === null || props === void 0 ? void 0 : props.appendTo) {
-            if ((0, utils_1.isString)(props.appendTo)) {
-                appendTo = document.querySelector(props.appendTo);
-            }
-            if ((0, utils_1.isElement)(props.appendTo)) {
-                appendTo = props.appendTo;
-            }
-            // should fallback to default value with a warning
-            if (!(0, utils_1.isElement)(appendTo)) {
-                console.warn('MessageBox', 'the appendTo option is not an HTMLElement. Falling back to document.body.');
-                appendTo = document.body;
+            (_f = state.editorErrorMessage) === null || _f === void 0 ? void 0 : _f.set('');
+            state.validateError = false;
+            return true;
+        };
+        const getInputElement = () => {
+            const inputRefs = inputRef.get(); // .$refs
+            return (0, signals_1.toRaw)(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.input) || (0, signals_1.toRaw)(inputRefs === null || inputRefs === void 0 ? void 0 : inputRefs.textarea);
+        };
+        const handleClose = () => {
+            handleAction('close');
+        };
+        // when close on press escape is disabled, pressing esc should not callout
+        // any other message box and close any other dialog-ish elements
+        // e.g. Dialog has a close on press esc feature, and when it closes, it calls
+        // props.beforeClose method to make a intermediate state by callout a message box
+        // for some verification or alerting. then if we allow global event liek this
+        // to dispatch, it could callout another message box.
+        const onCloseRequested = () => {
+            if (props.closeOnPressEscape) {
+                handleClose();
             }
+        };
+        // locks the screen to prevent scroll
+        if (props.lockScroll) {
+            (0, use_lockscreen_1.useLockscreen)(visible);
         }
-        return appendTo;
+        this.visible = visible;
+        // return {
+        //   ...toRefs(state),
+        //   ns,
+        //   overlayEvent,
+        //   visible,
+        //   hasMessage,
+        //   typeClass,
+        //   contentId,
+        //   inputId,
+        //   btnSize,
+        //   iconComponent,
+        //   confirmButtonClasses,
+        //   rootRef,
+        //   focusStartRef,
+        //   headerRef,
+        //   inputRef,
+        //   confirmRef,
+        //   doClose, // for outside usage
+        //   handleClose, // for out side usage
+        //   onCloseRequested,
+        //   handleWrapperClick,
+        //   handleInputEnter,
+        //   handleAction,
+        //   t,
+        // }
+        this.addChild(new framework_1.Transition({
+            name: 'fade-in-linear',
+            onAfterLeave: () => {
+                emit('vanish');
+            },
+            slot: new td_overlay_class_1.TdOverlay({
+                vShow: visible,
+                overlayClass: [ns.is('message-box'), state.modalClass],
+                mask: props.modal,
+                slot: new framework_1.Div({
+                    attrObj: {
+                        zIndex: state.zIndex,
+                        role: 'dialog',
+                        ariaLabel: state.title,
+                        ariaModal: true,
+                        ariaDescribedby: !state.showInput ? contentId.get() : undefined,
+                        class: `${ns.namespace.get()}-overlay-message-box`,
+                    },
+                    events: {
+                        click: overlayEvent.onClick,
+                        mousedown: overlayEvent.onMousedown,
+                        mouseup: overlayEvent.onMouseup,
+                    },
+                    slot: new td_focus_trap_class_1.TdFocusTrap({
+                        loop: true,
+                        trapped: visible,
+                        focusTrapEl: rootRef,
+                        focusStartEl: focusStartRef,
+                        emits: {
+                            releaseRequested: onCloseRequested,
+                        },
+                        slot: () => {
+                            var _a, _b, _c;
+                            return new framework_1.Div({
+                                refDom: rootRef,
+                                class: (0, signals_1.computed)(() => [
+                                    ns.b(),
+                                    state.customClass,
+                                    ns.is('draggable', draggable.get()),
+                                    { [ns.m('center')]: props.center },
+                                ]),
+                                styleObj: state.customStyle,
+                                attrObj: {
+                                    tabindex: '-1',
+                                },
+                                events: {
+                                    click: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
+                                },
+                                slot: [
+                                    new framework_1.Div({
+                                        vIf: state.title !== null && state.title !== undefined,
+                                        refDom: headerRef,
+                                        class: [
+                                            ns.e('header'),
+                                            { 'show-close': props.showClose },
+                                        ],
+                                        slot: [
+                                            new framework_1.Div({
+                                                class: ns.e('title'),
+                                                slot: [
+                                                    iconComponent.get() && props.center
+                                                        ? new td_icon_class_1.TdIcon({
+                                                            class: [ns.e('status'), typeClass.get()],
+                                                            slot: new (iconComponent.get())(),
+                                                        })
+                                                        : undefined,
+                                                    new framework_1.Span({
+                                                        slot: props.title,
+                                                    }),
+                                                ],
+                                            }),
+                                            new framework_1.Button({
+                                                vIf: props.showClose,
+                                                attrObj: {
+                                                    type: 'button',
+                                                    class: ns.e('headerbtn'),
+                                                    ariaLabel: t('el.messagebox.close'),
+                                                },
+                                                events: {
+                                                    click: () => handleAction(state.distinguishCancelAndClose
+                                                        ? 'close'
+                                                        : 'cancel'),
+                                                    keydown: (e) => {
+                                                        if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+                                                            handleAction(state.distinguishCancelAndClose
+                                                                ? 'close'
+                                                                : 'cancel');
+                                                            e === null || e === void 0 ? void 0 : e.preventDefault();
+                                                        }
+                                                    },
+                                                },
+                                                slot: new td_icon_class_1.TdIcon({
+                                                    class: ns.e('close'),
+                                                    // attrObj: {
+                                                    //   class: ns.e('close')
+                                                    // },
+                                                    slot: new svgs_1.ElCloseSvg(),
+                                                }),
+                                            }),
+                                        ],
+                                    }),
+                                    new framework_1.Div({
+                                        attrObj: {
+                                            id: contentId.get(),
+                                            class: ns.e('content'),
+                                        },
+                                        slot: [
+                                            new framework_1.Div({
+                                                class: ns.e('container'),
+                                                slot: [
+                                                    new td_icon_class_1.TdIcon({
+                                                        vIf: (0, signals_1.computed)(() => iconComponent.get() &&
+                                                            !props.center &&
+                                                            hasMessage),
+                                                        class: [ns.e('status'), typeClass.get()],
+                                                        slot: iconComponent.get() &&
+                                                            new (iconComponent.get())(),
+                                                    }),
+                                                    new framework_1.Div({
+                                                        vIf: hasMessage,
+                                                        class: ns.e('message'),
+                                                        slot: (_c = (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default) !== null && _c !== void 0 ? _c : [
+                                                            !state.dangerouslyUseHTMLString
+                                                                ? new framework_1.XElement({
+                                                                    tag: state.showInput ? 'label' : 'p',
+                                                                    attrObj: {
+                                                                        for: state.showInput
+                                                                            ? inputId.get()
+                                                                            : undefined,
+                                                                    },
+                                                                    slot: !state.dangerouslyUseHTMLString
+                                                                        ? props.message
+                                                                        : '',
+                                                                })
+                                                                : new framework_1.XElement({
+                                                                    tag: state.showInput ? 'label' : 'p',
+                                                                    attrObj: {
+                                                                        for: state.showInput
+                                                                            ? inputId.get()
+                                                                            : undefined,
+                                                                    },
+                                                                    html: props.message,
+                                                                }),
+                                                        ],
+                                                    }),
+                                                ],
+                                            }),
+                                            new framework_1.Div({
+                                                vShow: state.showInput,
+                                                class: ns.e('input'),
+                                                slot: [
+                                                    new td_input_class_1.TdInput({
+                                                        refEl: inputRef,
+                                                        vModel: state.inputValue,
+                                                        attrObj: {
+                                                            id: inputId.get(),
+                                                            type: state.inputType,
+                                                            // autocomplete: 'off',
+                                                            placeholder: state.inputPlaceholder,
+                                                            ariaInvalid: state.validateError,
+                                                            class: { invalid: state.validateError },
+                                                            events: {
+                                                                keydown: (e) => {
+                                                                    if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+                                                                        handleInputEnter(e);
+                                                                    }
+                                                                },
+                                                            },
+                                                        },
+                                                    }),
+                                                    new framework_1.Div({
+                                                        class: ns.e('errormsg'),
+                                                        styleObj: {
+                                                            visibility: (0, signals_1.computed)(() => {
+                                                                var _a;
+                                                                return ((_a = state.editorErrorMessage) === null || _a === void 0 ? void 0 : _a.get())
+                                                                    ? 'visible'
+                                                                    : 'hidden';
+                                                            }),
+                                                        },
+                                                        slot: state.editorErrorMessage,
+                                                    }),
+                                                ],
+                                            }),
+                                        ],
+                                    }),
+                                    new framework_1.Div({
+                                        class: ns.e('btns'),
+                                        slot: [
+                                            new td_button_class_1.TdButton({
+                                                vIf: state.showCancelButton,
+                                                loading: state.cancelButtonLoading,
+                                                loadingIcon: state.cancelButtonLoadingIcon,
+                                                class: [state.cancelButtonClass],
+                                                round: props.roundButton,
+                                                size: btnSize.get(),
+                                                attrObj: {
+                                                    type: 'button',
+                                                    class: ns.e('action'),
+                                                    ariaLabel: t('el.messagebox.cancel'),
+                                                },
+                                                events: {
+                                                    click: () => handleAction('cancel'),
+                                                    keydown: (e) => {
+                                                        if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+                                                            handleAction('cancel');
+                                                        }
+                                                        e === null || e === void 0 ? void 0 : e.preventDefault();
+                                                        e === null || e === void 0 ? void 0 : e.stopPropagation();
+                                                    },
+                                                },
+                                                slot: (0, signals_1.computed)(() => (0, signals_1.unref)(state.cancelButtonText) ||
+                                                    t('el.messagebox.cancel')),
+                                            }),
+                                            new td_button_class_1.TdButton({
+                                                vShow: state.showConfirmButton,
+                                                refEl: confirmRef,
+                                                type: 'primary',
+                                                loading: state.confirmButtonLoading,
+                                                loadingIcon: state.confirmButtonLoadingIcon,
+                                                class: state.confirmButtonClass,
+                                                round: props.roundButton,
+                                                disabled: state.confirmButtonDisabled,
+                                                size: btnSize.get(),
+                                                events: {
+                                                    click: () => handleAction('confirm'),
+                                                    keydown: (e) => {
+                                                        if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter') {
+                                                            handleAction('confirm');
+                                                        }
+                                                        e === null || e === void 0 ? void 0 : e.preventDefault();
+                                                        e === null || e === void 0 ? void 0 : e.stopPropagation();
+                                                    },
+                                                },
+                                                slot: (0, signals_1.computed)(() => (0, signals_1.unref)(state.confirmButtonText) ||
+                                                    t('el.messagebox.confirm')),
+                                            }),
+                                        ],
+                                    }),
+                                ],
+                            });
+                        },
+                    }),
+                }),
+            }),
+        }));
     }
 }
 exports.TdMessageBox = TdMessageBox;