@type-dom/ui 0.1.3 → 0.2.0

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

@@ -1,5 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-message-box.css';
-import '@element-plus/components/button/style/css';
-import '@element-plus/components/input/style/css';
-import '@element-plus/components/overlay/style/css';

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

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

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

@@ -1,5 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/message-box.scss';
-import '../../../../components/basic/td-button/style';
-import '../../../../components/form/td-input/style';
-import '../../../../components/feedback/td-overlay/style';

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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/message-box.scss");
-require("../../../../components/basic/td-button/style");
-require("../../../../components/form/td-input/style");
-require("../../../../components/feedback/td-overlay/style");

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

@@ -1,11 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { Signal } from '@type-dom/signals';
-import { ITdMessageBox, MessageBoxProps } from './td-message-box.interface';
-import './style/index';
-export declare class TdMessageBox extends TypeFragment implements ITdMessageBox {
-    className: 'TdMessageBox';
-    props: MessageBoxProps;
-    visible?: Signal<boolean>;
-    constructor(params?: MessageBoxProps);
-    setup(): void;
-}

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

@@ -1,507 +0,0 @@
-"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_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 = {}) {
-        super();
-        this.className = 'TdMessageBox';
-        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
-        const state = Object.assign({
-            // autofocus element when open message-box
-            autofocus: true,
-            beforeClose: undefined,
-            callback: undefined,
-            cancelButtonText: '',
-            cancelButtonClass: '',
-            confirmButtonText: '',
-            confirmButtonClass: '',
-            customClass: '',
-            customStyle: {},
-            dangerouslyUseHTMLString: false,
-            distinguishCancelAndClose: false,
-            // icon: '',
-            inputPattern: undefined,
-            inputPlaceholder: '',
-            inputType: 'text',
-            inputValue: (0, signals_1.signal)(undefined),
-            inputValidator: undefined,
-            inputErrorMessage: '',
-            message: undefined,
-            modalFade: true,
-            modalClass: '',
-            showCancelButton: false,
-            showConfirmButton: true,
-            type: '',
-            title: undefined,
-            showInput: false,
-            action: '',
-            confirmButtonLoading: false,
-            cancelButtonLoading: false,
-            confirmButtonLoadingIcon: new svgs_1.ElLoadingSvg(), // markRaw(Loading),
-            cancelButtonLoadingIcon: new svgs_1.ElLoadingSvg(), // markRaw(Loading),
-            confirmButtonDisabled: false,
-            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
-            validateError: false,
-            zIndex: nextZIndex(),
-        }, props);
-        const typeClass = (0, signals_1.computed)(() => {
-            const type = state.type;
-            return { [ns.bm('icon', type)]: type && svgs_1.TypeComponentsMap[type] };
-        });
-        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();
-            }
-        }), { 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 {
-                        focusStartRef.set(rootRef.get());
-                    }
-                }
-                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 {
-                            focusStartRef.set(rootRef.get());
-                        }
-                    }
-                });
-            }
-            else {
-                (_c = state.editorErrorMessage) === null || _c === void 0 ? void 0 : _c.set('');
-                state.validateError = false;
-            }
-        });
-        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);
-            }
-        });
-        function doClose() {
-            if (!visible.get())
-                return;
-            visible.set(false);
-            (0, framework_1.nextTick)(() => {
-                if (state.action)
-                    emit('action', state.action);
-            });
-        }
-        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 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;
-                }
-                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;
-                    }
-                }
-            }
-            (_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);
-        }
-        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;

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

@@ -1,3 +0,0 @@
-import { MessageBoxProps } from './td-message-box.interface';
-export declare const messageBoxProps: MessageBoxProps;
-export declare const emits: string[];

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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.emits = exports.messageBoxProps = void 0;
-exports.messageBoxProps = {
-    modal: true,
-    lockScroll: true,
-    showClose: true,
-    closeOnClickModal: true,
-    closeOnPressEscape: true,
-    closeOnHashChange: true,
-    roundButton: false,
-    container: 'body',
-    boxType: '',
-};
-exports.emits = ['vanish', 'action'];