element-plus/lib/el-message-box/index.js

A Component Library for Vue3.0

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var ElButton = require('../el-button');
var ElInput = require('../el-input');
var locale = require('../locale');
var overlay = require('../el-overlay');
var hooks = require('../hooks');
var directives = require('../directives');
var PopupManager = require('../utils/popup-manager');
var dom = require('../utils/dom');
var aria = require('../utils/aria');
var isServer = require('../utils/isServer');
var util = require('../utils/util');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var ElButton__default = /*#__PURE__*/_interopDefaultLegacy(ElButton);
var ElInput__default = /*#__PURE__*/_interopDefaultLegacy(ElInput);
var PopupManager__default = /*#__PURE__*/_interopDefaultLegacy(PopupManager);
var isServer__default = /*#__PURE__*/_interopDefaultLegacy(isServer);

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

function __awaiter(thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
}

const TypeMap = {
    success: 'success',
    info: 'info',
    warning: 'warning',
    error: 'error',
};
var script = vue.defineComponent({
    name: 'ElMessageBox',
    components: {
        ElButton: ElButton__default['default'],
        ElInput: ElInput__default['default'],
        ElOverlay: overlay.Overlay,
    },
    directives: {
        TrapFocus: directives.TrapFocus,
    },
    props: {
        beforeClose: {
            type: Function,
            default: undefined,
        },
        callback: Function,
        cancelButtonText: {
            type: String,
        },
        cancelButtonClass: String,
        center: Boolean,
        closeOnClickModal: {
            type: Boolean,
            default: true,
        },
        closeOnPressEscape: {
            type: Boolean,
            default: true,
        },
        closeOnHashChange: {
            type: Boolean,
            default: true,
        },
        confirmButtonText: {
            type: String,
        },
        confirmButtonClass: String,
        container: {
            type: String,
            default: 'body',
        },
        customClass: String,
        dangerouslyUseHTMLString: Boolean,
        distinguishCancelAndClose: Boolean,
        iconClass: String,
        inputPattern: {
            type: Object,
            default: () => undefined,
            validator: (val) => (val instanceof RegExp || val === 'undefined'),
        },
        inputPlaceholder: {
            type: String,
        },
        inputType: {
            type: String,
            default: 'text',
        },
        inputValue: {
            type: String,
        },
        inputValidator: {
            type: Function,
            default: null,
        },
        inputErrorMessage: String,
        lockScroll: {
            type: Boolean,
            default: true,
        },
        message: String,
        modalFade: {
            type: Boolean,
            default: true,
        },
        modalClass: String,
        modal: {
            type: Boolean,
            default: true,
        },
        roundButton: Boolean,
        showCancelButton: Boolean,
        showConfirmButton: {
            type: Boolean,
            default: true,
        },
        showClose: {
            type: Boolean,
            default: true,
        },
        type: String,
        title: String,
        showInput: Boolean,
        zIndex: Number,
    },
    emits: ['vanish', 'action'],
    setup(props, { emit }) {
        const visible = vue.ref(false);
        const state = vue.reactive({
            action: '',
            inputValue: props.inputValue,
            confirmButtonLoading: false,
            cancelButtonLoading: false,
            cancelButtonText: props.cancelButtonText,
            confirmButtonDisabled: false,
            confirmButtonText: props.confirmButtonText,
            editorErrorMessage: '',
            validateError: false,
            zIndex: PopupManager__default['default'].nextZIndex(),
        });
        const icon = vue.computed(() => props.iconClass || (props.type && TypeMap[props.type] ? `el-icon-${TypeMap[props.type]}` : ''));
        const hasMessage = vue.computed(() => !!props.message);
        const inputRef = vue.ref(null);
        const confirmRef = vue.ref(null);
        const confirmButtonClasses = vue.computed(() => `el-button--primary ${props.confirmButtonClass}`);
        vue.watch(() => state.inputValue, (val) => __awaiter(this, void 0, void 0, function* () {
            yield vue.nextTick();
            if (props.type === 'prompt' && val !== null) {
                validate();
            }
        }), { immediate: true });
        vue.watch(() => visible.value, val => {
            if (val) {
                if (props.type === 'alert' || props.type === 'confirm') {
                    vue.nextTick().then(() => { var _a, _b, _c; (_c = (_b = (_a = confirmRef.value) === null || _a === void 0 ? void 0 : _a.$el) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b); });
                }
                state.zIndex = PopupManager__default['default'].nextZIndex();
            }
            if (props.type !== 'prompt')
                return;
            if (val) {
                vue.nextTick().then(() => {
                    if (inputRef.value && inputRef.value.$el) {
                        getInputElement().focus();
                    }
                });
            }
            else {
                state.editorErrorMessage = '';
                state.validateError = false;
            }
        });
        vue.onMounted(() => __awaiter(this, void 0, void 0, function* () {
            yield vue.nextTick();
            if (props.closeOnHashChange) {
                dom.on(window, 'hashchange', doClose);
            }
        }));
        vue.onBeforeUnmount(() => {
            if (props.closeOnHashChange) {
                dom.off(window, 'hashchange', doClose);
            }
        });
        function doClose() {
            if (!visible.value)
                return;
            visible.value = false;
            vue.nextTick(() => {
                if (state.action)
                    emit('action', state.action);
            });
        }
        const handleWrapperClick = () => {
            if (props.closeOnClickModal) {
                handleAction(props.distinguishCancelAndClose ? 'close' : 'cancel');
            }
        };
        const handleInputEnter = () => {
            if (props.inputType !== 'textarea') {
                return handleAction('confirm');
            }
        };
        const handleAction = (action) => {
            var _a;
            if (props.type === 'prompt' && action === 'confirm' && !validate()) {
                return;
            }
            state.action = action;
            if (props.beforeClose) {
                (_a = props.beforeClose) === null || _a === void 0 ? void 0 : _a.call(props, action, state, doClose);
            }
            else {
                doClose();
            }
        };
        const validate = () => {
            if (props.type === 'prompt') {
                const inputPattern = props.inputPattern;
                if (inputPattern && !inputPattern.test(state.inputValue || '')) {
                    state.editorErrorMessage = props.inputErrorMessage || locale.t('el.messagebox.error');
                    state.validateError = true;
                    return false;
                }
                const inputValidator = props.inputValidator;
                if (typeof inputValidator === 'function') {
                    const validateResult = inputValidator(state.inputValue);
                    if (validateResult === false) {
                        state.editorErrorMessage = props.inputErrorMessage || locale.t('el.messagebox.error');
                        state.validateError = true;
                        return false;
                    }
                    if (typeof validateResult === 'string') {
                        state.editorErrorMessage = validateResult;
                        state.validateError = true;
                        return false;
                    }
                }
            }
            state.editorErrorMessage = '';
            state.validateError = false;
            return true;
        };
        const getInputElement = () => {
            const inputRefs = inputRef.value.$refs;
            return (inputRefs.input || inputRefs.textarea);
        };
        const handleClose = () => {
            handleAction('close');
        };
        if (props.closeOnPressEscape) {
            hooks.useModal({
                handleClose,
            }, visible);
        }
        else {
            hooks.usePreventGlobal(visible, 'keydown', (e) => e.code === aria.EVENT_CODE.esc);
        }
        if (props.lockScroll) {
            hooks.useLockScreen(visible);
        }
        hooks.useRestoreActive(visible);
        return {
            state,
            visible,
            hasMessage,
            icon,
            confirmButtonClasses,
            inputRef,
            confirmRef,
            doClose,
            handleClose,
            handleWrapperClick,
            handleInputEnter,
            handleAction,
            t: locale.t,
        };
    },
});

const _hoisted_1 = {
  key: 0,
  class: "el-message-box__header"
};
const _hoisted_2 = { class: "el-message-box__title" };
const _hoisted_3 = /*#__PURE__*/vue.createVNode("i", { class: "el-message-box__close el-icon-close" }, null, -1 /* HOISTED */);
const _hoisted_4 = { class: "el-message-box__content" };
const _hoisted_5 = { class: "el-message-box__container" };
const _hoisted_6 = {
  key: 1,
  class: "el-message-box__message"
};
const _hoisted_7 = { key: 0 };
const _hoisted_8 = { class: "el-message-box__input" };
const _hoisted_9 = { class: "el-message-box__btns" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_input = vue.resolveComponent("el-input");
  const _component_el_button = vue.resolveComponent("el-button");
  const _component_el_overlay = vue.resolveComponent("el-overlay");
  const _directive_trap_focus = vue.resolveDirective("trap-focus");

  return (vue.openBlock(), vue.createBlock(vue.Transition, {
    name: "fade-in-linear",
    onAfterLeave: _cache[8] || (_cache[8] = $event => (_ctx.$emit('vanish')))
  }, {
    default: vue.withCtx(() => [
      vue.withDirectives(vue.createVNode(_component_el_overlay, {
        "z-index": _ctx.state.zIndex,
        "overlay-class": ['is-message-box', _ctx.modalClass],
        mask: _ctx.modal,
        onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"])
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createVNode("div", {
            ref: "root",
            "aria-label": _ctx.title || 'dialog',
            "aria-modal": "true",
            class: [
          'el-message-box',
          _ctx.customClass,
          { 'el-message-box--center': _ctx.center },
        ]
          }, [
            (_ctx.title !== null && _ctx.title !== undefined)
              ? (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
                  vue.createVNode("div", _hoisted_2, [
                    (_ctx.icon && _ctx.center)
                      ? (vue.openBlock(), vue.createBlock("div", {
                          key: 0,
                          class: ['el-message-box__status', _ctx.icon]
                        }, null, 2 /* CLASS */))
                      : vue.createCommentVNode("v-if", true),
                    vue.createVNode("span", null, vue.toDisplayString(_ctx.title), 1 /* TEXT */)
                  ]),
                  (_ctx.showClose)
                    ? (vue.openBlock(), vue.createBlock("button", {
                        key: 0,
                        type: "button",
                        class: "el-message-box__headerbtn",
                        "aria-label": "Close",
                        onClick: _cache[1] || (_cache[1] = $event => (
              _ctx.handleAction(_ctx.distinguishCancelAndClose ? 'close' : 'cancel')
            )),
                        onKeydown: _cache[2] || (_cache[2] = vue.withKeys($event => (
              _ctx.handleAction(_ctx.distinguishCancelAndClose ? 'close' : 'cancel')
            ), ["enter"]))
                      }, [
                        _hoisted_3
                      ], 32 /* HYDRATE_EVENTS */))
                    : vue.createCommentVNode("v-if", true)
                ]))
              : vue.createCommentVNode("v-if", true),
            vue.createVNode("div", _hoisted_4, [
              vue.createVNode("div", _hoisted_5, [
                (_ctx.icon && !_ctx.center && _ctx.hasMessage)
                  ? (vue.openBlock(), vue.createBlock("div", {
                      key: 0,
                      class: ['el-message-box__status', _ctx.icon]
                    }, null, 2 /* CLASS */))
                  : vue.createCommentVNode("v-if", true),
                (_ctx.hasMessage)
                  ? (vue.openBlock(), vue.createBlock("div", _hoisted_6, [
                      vue.renderSlot(_ctx.$slots, "default", {}, () => [
                        (!_ctx.dangerouslyUseHTMLString)
                          ? (vue.openBlock(), vue.createBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1 /* TEXT */))
                          : (vue.openBlock(), vue.createBlock("p", {
                              key: 1,
                              innerHTML: _ctx.message
                            }, null, 8 /* PROPS */, ["innerHTML"]))
                      ])
                    ]))
                  : vue.createCommentVNode("v-if", true)
              ]),
              vue.withDirectives(vue.createVNode("div", _hoisted_8, [
                vue.createVNode(_component_el_input, {
                  ref: "inputRef",
                  modelValue: _ctx.state.inputValue,
                  "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => (_ctx.state.inputValue = $event)),
                  type: _ctx.inputType,
                  placeholder: _ctx.inputPlaceholder,
                  class: { invalid: _ctx.state.validateError },
                  onKeydown: vue.withKeys(vue.withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
                }, null, 8 /* PROPS */, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
                vue.createVNode("div", {
                  class: "el-message-box__errormsg",
                  style: {
                visibility: !!_ctx.state.editorErrorMessage ? 'visible' : 'hidden',
              }
                }, vue.toDisplayString(_ctx.state.editorErrorMessage), 5 /* TEXT, STYLE */)
              ], 512 /* NEED_PATCH */), [
                [vue.vShow, _ctx.showInput]
              ])
            ]),
            vue.createVNode("div", _hoisted_9, [
              (_ctx.showCancelButton)
                ? (vue.openBlock(), vue.createBlock(_component_el_button, {
                    key: 0,
                    loading: _ctx.state.cancelButtonLoading,
                    class: [_ctx.cancelButtonClass],
                    round: _ctx.roundButton,
                    size: "small",
                    onClick: _cache[4] || (_cache[4] = $event => (_ctx.handleAction('cancel'))),
                    onKeydown: _cache[5] || (_cache[5] = vue.withKeys($event => (_ctx.handleAction('cancel')), ["enter"]))
                  }, {
                    default: vue.withCtx(() => [
                      vue.createTextVNode(vue.toDisplayString(_ctx.state.cancelButtonText || _ctx.t('el.messagebox.cancel')), 1 /* TEXT */)
                    ]),
                    _: 1 /* STABLE */
                  }, 8 /* PROPS */, ["loading", "class", "round"]))
                : vue.createCommentVNode("v-if", true),
              vue.withDirectives(vue.createVNode(_component_el_button, {
                ref: "confirmRef",
                loading: _ctx.state.confirmButtonLoading,
                class: [_ctx.confirmButtonClasses],
                round: _ctx.roundButton,
                disabled: _ctx.state.confirmButtonDisabled,
                size: "small",
                onClick: _cache[6] || (_cache[6] = $event => (_ctx.handleAction('confirm'))),
                onKeydown: _cache[7] || (_cache[7] = vue.withKeys($event => (_ctx.handleAction('confirm')), ["enter"]))
              }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode(vue.toDisplayString(_ctx.state.confirmButtonText || _ctx.t('el.messagebox.confirm')), 1 /* TEXT */)
                ]),
                _: 1 /* STABLE */
              }, 8 /* PROPS */, ["loading", "class", "round", "disabled"]), [
                [vue.vShow, _ctx.showConfirmButton]
              ])
            ])
          ], 10 /* CLASS, PROPS */, ["aria-label"]), [
            [_directive_trap_focus]
          ])
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["z-index", "overlay-class", "mask", "onClick"]), [
        [vue.vShow, _ctx.visible]
      ])
    ]),
    _: 1 /* STABLE */
  }))
}

script.render = render;
script.__file = "packages/message-box/src/index.vue";

const messageInstance = new Map();
const initInstance = (props, container) => {
    const vnode = vue.h(script, props);
    vue.render(vnode, container);
    document.body.appendChild(container.firstElementChild);
    return vnode.component;
};
const genContainer = () => {
    return document.createElement('div');
};
const showMessage = (options) => {
    const container = genContainer();
    options.onVanish = () => {
        vue.render(null, container);
        messageInstance.delete(vm);
    };
    options.onAction = (action) => {
        const currentMsg = messageInstance.get(vm);
        let resolve;
        if (options.showInput) {
            resolve = { value: vm.state.inputValue, action };
        }
        else {
            resolve = action;
        }
        if (options.callback) {
            options.callback(resolve, instance.proxy);
        }
        else {
            if (action === 'cancel' || action === 'close') {
                if (options.distinguishCancelAndClose && action !== 'cancel') {
                    currentMsg.reject('close');
                }
                else {
                    currentMsg.reject('cancel');
                }
            }
            else {
                currentMsg.resolve(resolve);
            }
        }
    };
    const instance = initInstance(options, container);
    const vm = instance.proxy;
    if (util.isVNode(options.message)) {
        instance.slots.default = () => [options.message];
    }
    vm.visible = true;
    return vm;
};
function MessageBox(options) {
    if (isServer__default['default'])
        return;
    let callback;
    if (util.isString(options) || util.isVNode(options)) {
        options = {
            message: options,
        };
    }
    else {
        callback = options.callback;
    }
    return new Promise((resolve, reject) => {
        const vm = showMessage(options);
        messageInstance.set(vm, {
            options,
            callback,
            resolve,
            reject,
        });
    });
}
MessageBox.alert = (message, title, options) => {
    if (typeof title === 'object') {
        options = title;
        title = '';
    }
    else if (title === undefined) {
        title = '';
    }
    return MessageBox(Object.assign({
        title: title,
        message: message,
        type: 'alert',
        closeOnPressEscape: false,
        closeOnClickModal: false,
    }, options));
};
MessageBox.confirm = (message, title, options) => {
    if (typeof title === 'object') {
        options = title;
        title = '';
    }
    else if (title === undefined) {
        title = '';
    }
    return MessageBox(Object.assign({
        title: title,
        message: message,
        type: 'confirm',
        showCancelButton: true,
    }, options));
};
MessageBox.prompt = (message, title, options) => {
    if (typeof title === 'object') {
        options = title;
        title = '';
    }
    else if (title === undefined) {
        title = '';
    }
    return MessageBox(Object.assign({
        title: title,
        message: message,
        showCancelButton: true,
        showInput: true,
        type: 'prompt',
    }, options));
};
MessageBox.close = () => {
    messageInstance.forEach((_, vm) => {
        vm.doClose();
    });
    messageInstance.clear();
};

MessageBox.install = (app) => {
    app.config.globalProperties.$msgbox = MessageBox;
    app.config.globalProperties.$messageBox = MessageBox;
    app.config.globalProperties.$alert = MessageBox.alert;
    app.config.globalProperties.$confirm = MessageBox.confirm;
    app.config.globalProperties.$prompt = MessageBox.prompt;
};

exports.default = MessageBox;