element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/lib/components/message/src/message.vue_vue_type_template_id_031967c2_lang.js

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  key: 0,
+  class: "el-message__content"
+};
+const _hoisted_3 = ["innerHTML"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_badge = vue.resolveComponent("el-badge");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_close = vue.resolveComponent("close");
+  return vue.openBlock(), vue.createBlock(vue.Transition, {
+    name: "el-message-fade",
+    onBeforeLeave: _ctx.onClose,
+    onAfterLeave: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("destroy"))
+  }, {
+    default: vue.withCtx(() => {
+      var _a;
+      return [
+        vue.withDirectives(vue.createElementVNode("div", {
+          id: _ctx.id,
+          class: vue.normalizeClass([
+            "el-message",
+            _ctx.type && !_ctx.icon ? `el-message--${_ctx.type}` : "",
+            _ctx.center ? "is-center" : "",
+            _ctx.showClose ? "is-closable" : "",
+            _ctx.customClass
+          ]),
+          style: vue.normalizeStyle(_ctx.customStyle),
+          role: "alert",
+          onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.clearTimer && _ctx.clearTimer(...args)),
+          onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.startTimer && _ctx.startTimer(...args))
+        }, [
+          _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(_component_el_badge, {
+            key: 0,
+            value: _ctx.repeatNum,
+            type: (_a = _ctx.type) != null ? _a : "info",
+            class: "el-message__badge"
+          }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
+          _ctx.iconComponent ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            key: 1,
+            class: vue.normalizeClass(["el-message__icon", _ctx.typeClass])
+          }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+            ]),
+            _: 1
+          }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
+              vue.createElementVNode("p", {
+                class: "el-message__content",
+                innerHTML: _ctx.message
+              }, null, 8, _hoisted_3)
+            ], 2112))
+          ]),
+          _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            key: 2,
+            class: "el-message__closeBtn",
+            onClick: vue.withModifiers(_ctx.close, ["stop"])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_close)
+            ]),
+            _: 1
+          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+        ], 46, _hoisted_1), [
+          [vue.vShow, _ctx.visible]
+        ])
+      ];
+    }),
+    _: 3
+  }, 8, ["onBeforeLeave"]);
+}
+
+exports.render = render;
+//# sourceMappingURL=message.vue_vue_type_template_id_031967c2_lang.js.map

package/lib/components/message/src/message.vue_vue_type_template_id_031967c2_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.vue_vue_type_template_id_031967c2_lang.js","sources":["../../../../../../packages/components/message/src/message.vue?vue&type=template&id=031967c2&lang.js"],"sourcesContent":["<template>\n  <transition\n    name=\"el-message-fade\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[\n        'el-message',\n        type && !icon ? `el-message--${type}` : '',\n        center ? 'is-center' : '',\n        showClose ? 'is-closable' : '',\n        customClass,\n      ]\"\n      :style=\"customStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <el-badge\n        v-if=\"repeatNum > 1\"\n        :value=\"repeatNum\"\n        :type=\"type ?? 'info'\"\n        class=\"el-message__badge\"\n      >\n      </el-badge>\n      <el-icon v-if=\"iconComponent\" class=\"el-message__icon\" :class=\"typeClass\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <slot>\n        <p v-if=\"!dangerouslyUseHTMLString\" class=\"el-message__content\">\n          {{ message }}\n        </p>\n        <!-- Caution here, message could've been compromised, never use user's input as message -->\n        <p v-else class=\"el-message__content\" v-html=\"message\"></p>\n      </slot>\n      <el-icon\n        v-if=\"showClose\"\n        class=\"el-message__closeBtn\"\n        @click.stop=\"close\"\n      >\n        <close />\n      </el-icon>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport ElBadge from '@element-plus/components/badge'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport { messageEmits, messageProps } from './message'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMessage',\n\n  components: {\n    ElBadge,\n    ElIcon,\n    ...TypeComponents,\n  },\n\n  props: messageProps,\n  emits: messageEmits,\n\n  setup(props) {\n    const visible = ref(false)\n    let stopTimer: (() => void) | undefined = undefined\n\n    const typeClass = computed(() => {\n      const type = props.type\n      return type && TypeComponentsMap[type] ? `el-message-icon--${type}` : ''\n    })\n\n    const iconComponent = computed(() => {\n      return props.icon || TypeComponentsMap[props.type] || ''\n    })\n\n    const customStyle = computed<CSSProperties>(() => ({\n      top: `${props.offset}px`,\n      zIndex: props.zIndex,\n    }))\n\n    function startTimer() {\n      if (props.duration > 0) {\n        ;({ stop: stopTimer } = useTimeoutFn(() => {\n          if (visible.value) close()\n        }, props.duration))\n      }\n    }\n\n    function clearTimer() {\n      stopTimer?.()\n    }\n\n    function close() {\n      visible.value = false\n    }\n\n    function keydown({ code }: KeyboardEvent) {\n      if (code === EVENT_CODE.esc) {\n        // press esc to close the message\n        if (visible.value) {\n          close()\n        }\n      } else {\n        startTimer() // resume timer\n      }\n    }\n\n    onMounted(() => {\n      startTimer()\n      visible.value = true\n    })\n\n    watch(\n      () => props.repeatNum,\n      () => {\n        clearTimer()\n        startTimer()\n      }\n    )\n\n    useEventListener(document, 'keydown', keydown)\n\n    return {\n      typeClass,\n      iconComponent,\n      customStyle,\n      visible,\n\n      close,\n      clearTimer,\n      startTimer,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode","_renderSlot","_createElementBlock","_createCommentVNode","_createVNode"],"mappings":";;;;;;;;;EAgC4C,OAAM;AAAA;;;;;;0BA/BhDA;IACE,MAAK;AAAA,IACJ,eAAc;IACd,oDAAa;;yBAEd;;;2BAAAC;UAEG,IAAI;UACJ;;;;;;;UAOA,0BAAO;UACR,MAAK;AAAA,UACJ,qDAAY;UACZ,qDAAY;;UAGL,uCADRD;;YAEG,OAAO;YACP,MAAM,oBAAA;YACP,OAAM;AAAA;UAGO,uCAAfA;;YAA8B,2BAAM,oBAA2B;;iCAC7D;gCAAAA,4CAAgB;;;;UAElBE,2CAAA;aACY,kDAAVC,4BAAA,gCACK,uCAGLA;cADAC;cACAH;gBAAU,OAAM;AAAA,gBAAsB,WAAQ;;;;UAGxC,mCADRD;;YAEE,OAAM;AAAA,YACL,2BAAY;;iCAEb;cAAAK;;;;;sBApCM;;;;;;;;;;"}

package/lib/components/message/src/message2.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var message_vue_vue_type_script_lang = require('./message.vue_vue&type=script&lang.js');
-var message_vue_vue_type_template_id_031967c2_lang = require('./message.vue_vue&type=template&id=031967c2&lang.js');
+var message_vue_vue_type_script_lang = require('./message.vue_vue_type_script_lang.js');
+var message_vue_vue_type_template_id_031967c2_lang = require('./message.vue_vue_type_template_id_031967c2_lang.js');
 
 message_vue_vue_type_script_lang["default"].render = message_vue_vue_type_template_id_031967c2_lang.render;
 message_vue_vue_type_script_lang["default"].__file = "packages/components/message/src/message.vue";

package/lib/components/message-box/src/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_vue_vue_type_script_lang = require('./index.vue_vue&type=script&lang.js');
-var index_vue_vue_type_template_id_7035e868_lang = require('./index.vue_vue&type=template&id=7035e868&lang.js');
+var index_vue_vue_type_script_lang = require('./index.vue_vue_type_script_lang.js');
+var index_vue_vue_type_template_id_7035e868_lang = require('./index.vue_vue_type_template_id_7035e868_lang.js');
 
 index_vue_vue_type_script_lang["default"].render = index_vue_vue_type_template_id_7035e868_lang.render;
 index_vue_vue_type_script_lang["default"].__file = "packages/components/message-box/src/index.vue";

package/lib/components/message-box/src/index.vue.d.ts

@@ -1761,7 +1761,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly ignoreCase: boolean;
         readonly multiline: boolean;
         lastIndex: number;
-        compile: () => RegExp;
+        compile: (pattern: string, flags?: string | undefined) => RegExp;
         readonly flags: string;
         readonly sticky: boolean;
         readonly unicode: boolean;
@@ -1773,7 +1773,6 @@ declare const _default: import("vue").DefineComponent<{
         };
         [Symbol.search]: (string: string) => number;
         [Symbol.split]: (string: string, limit?: number | undefined) => string[];
-        [Symbol.matchAll]: (str: string) => IterableIterator<RegExpMatchArray>;
     }>;
     inputValidator: import("vue").Ref<import("./message-box.type").MessageBoxInputValidator>;
     inputErrorMessage: import("vue").Ref<string>;

package/lib/components/message-box/src/index.vue_vue_type_script_lang.js

@@ -0,0 +1,263 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var index$1 = require('../../button/index.js');
+require('../../../directives/index.js');
+require('../../../hooks/index.js');
+var index$2 = require('../../input/index.js');
+var index$3 = require('../../overlay/index.js');
+var popupManager = require('../../../utils/popup-manager.js');
+var dom = require('../../../utils/dom.js');
+var aria = require('../../../utils/aria.js');
+var validators = require('../../../utils/validators.js');
+var index$4 = require('../../icon/index.js');
+var icon = require('../../../utils/icon.js');
+var index = require('../../../directives/trap-focus/index.js');
+var index$5 = require('../../../hooks/use-locale/index.js');
+var index$6 = require('../../../hooks/use-modal/index.js');
+var index$7 = require('../../../hooks/use-prevent-global/index.js');
+var index$8 = require('../../../hooks/use-lockscreen/index.js');
+var index$9 = require('../../../hooks/use-restore-active/index.js');
+
+var script = vue.defineComponent({
+  name: "ElMessageBox",
+  directives: {
+    TrapFocus: index["default"]
+  },
+  components: {
+    ElButton: index$1.ElButton,
+    ElInput: index$2.ElInput,
+    ElOverlay: index$3.ElOverlay,
+    ElIcon: index$4.ElIcon,
+    ...icon.TypeComponents
+  },
+  inheritAttrs: false,
+  props: {
+    buttonSize: {
+      type: String,
+      validator: validators.isValidComponentSize
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+    closeOnHashChange: {
+      type: Boolean,
+      default: true
+    },
+    center: Boolean,
+    roundButton: {
+      default: false,
+      type: Boolean
+    },
+    container: {
+      type: String,
+      default: "body"
+    },
+    boxType: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["vanish", "action"],
+  setup(props, { emit }) {
+    const { t } = index$5.useLocaleInject();
+    const visible = vue.ref(false);
+    const state = vue.reactive({
+      beforeClose: null,
+      callback: null,
+      cancelButtonText: "",
+      cancelButtonClass: "",
+      confirmButtonText: "",
+      confirmButtonClass: "",
+      customClass: "",
+      customStyle: {},
+      dangerouslyUseHTMLString: false,
+      distinguishCancelAndClose: false,
+      icon: "",
+      inputPattern: null,
+      inputPlaceholder: "",
+      inputType: "text",
+      inputValue: null,
+      inputValidator: null,
+      inputErrorMessage: "",
+      message: null,
+      modalFade: true,
+      modalClass: "",
+      showCancelButton: false,
+      showConfirmButton: true,
+      type: "",
+      title: void 0,
+      showInput: false,
+      action: "",
+      confirmButtonLoading: false,
+      cancelButtonLoading: false,
+      confirmButtonDisabled: false,
+      editorErrorMessage: "",
+      validateError: false,
+      zIndex: popupManager["default"].nextZIndex()
+    });
+    const typeClass = vue.computed(() => {
+      const type = state.type;
+      return type && icon.TypeComponentsMap[type] ? `el-message-box-icon--${type}` : "";
+    });
+    const iconComponent = vue.computed(() => state.icon || icon.TypeComponentsMap[state.type] || "");
+    const hasMessage = vue.computed(() => !!state.message);
+    const inputRef = vue.ref(null);
+    const confirmRef = vue.ref(null);
+    const confirmButtonClasses = vue.computed(() => `el-button--primary ${state.confirmButtonClass}`);
+    vue.watch(() => state.inputValue, async (val) => {
+      await vue.nextTick();
+      if (props.boxType === "prompt" && val !== null) {
+        validate();
+      }
+    }, { immediate: true });
+    vue.watch(() => visible.value, (val) => {
+      if (val) {
+        if (props.boxType === "alert" || props.boxType === "confirm") {
+          vue.nextTick().then(() => {
+            var _a, _b, _c;
+            (_c = (_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus) == null ? void 0 : _c.call(_b);
+          });
+        }
+        state.zIndex = popupManager["default"].nextZIndex();
+      }
+      if (props.boxType !== "prompt")
+        return;
+      if (val) {
+        vue.nextTick().then(() => {
+          if (inputRef.value && inputRef.value.$el) {
+            getInputElement().focus();
+          }
+        });
+      } else {
+        state.editorErrorMessage = "";
+        state.validateError = false;
+      }
+    });
+    vue.onMounted(async () => {
+      await 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(state.distinguishCancelAndClose ? "close" : "cancel");
+      }
+    };
+    const handleInputEnter = () => {
+      if (state.inputType !== "textarea") {
+        return handleAction("confirm");
+      }
+    };
+    const handleAction = (action) => {
+      var _a;
+      if (props.boxType === "prompt" && action === "confirm" && !validate()) {
+        return;
+      }
+      state.action = action;
+      if (state.beforeClose) {
+        (_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose);
+      } else {
+        doClose();
+      }
+    };
+    const validate = () => {
+      if (props.boxType === "prompt") {
+        const inputPattern = state.inputPattern;
+        if (inputPattern && !inputPattern.test(state.inputValue || "")) {
+          state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
+          state.validateError = true;
+          return false;
+        }
+        const inputValidator = state.inputValidator;
+        if (typeof inputValidator === "function") {
+          const validateResult = inputValidator(state.inputValue);
+          if (validateResult === false) {
+            state.editorErrorMessage = state.inputErrorMessage || 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) {
+      index$6["default"]({
+        handleClose
+      }, visible);
+    } else {
+      index$7["default"](visible, "keydown", (e) => e.code === aria.EVENT_CODE.esc);
+    }
+    if (props.lockScroll) {
+      index$8["default"](visible);
+    }
+    index$9["default"](visible);
+    return {
+      ...vue.toRefs(state),
+      visible,
+      hasMessage,
+      typeClass,
+      iconComponent,
+      confirmButtonClasses,
+      inputRef,
+      confirmRef,
+      doClose,
+      handleClose,
+      handleWrapperClick,
+      handleInputEnter,
+      handleAction,
+      t
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=index.vue_vue_type_script_lang.js.map

package/lib/components/message-box/src/index.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockScreen,\n  useLocaleInject,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocaleInject()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(\n      () => `el-button--primary ${state.confirmButtonClass}`\n    )\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockScreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","TrapFocus","ElButton","ElInput","ElOverlay","ElIcon","TypeComponents","isValidComponentSize","useLocaleInject","ref","reactive","PopupManager","computed","TypeComponentsMap","nextTick","EVENT_CODE","toRefs"],"mappings":"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"}

package/lib/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "el-message-box__header"
+};
+const _hoisted_3 = { class: "el-message-box__title" };
+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 = ["innerHTML"];
+const _hoisted_9 = { class: "el-message-box__input" };
+const _hoisted_10 = { class: "el-message-box__btns" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_close = vue.resolveComponent("close");
+  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[7] || (_cache[7] = ($event) => _ctx.$emit("vanish"))
+  }, {
+    default: vue.withCtx(() => [
+      vue.withDirectives(vue.createVNode(_component_el_overlay, {
+        "z-index": _ctx.zIndex,
+        "overlay-class": ["is-message-box", _ctx.modalClass],
+        mask: _ctx.modal,
+        onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"])
+      }, {
+        default: vue.withCtx(() => [
+          vue.withDirectives(vue.createElementVNode("div", {
+            ref: "root",
+            "aria-label": _ctx.title || "dialog",
+            "aria-modal": "true",
+            class: vue.normalizeClass([
+              "el-message-box",
+              _ctx.customClass,
+              { "el-message-box--center": _ctx.center }
+            ]),
+            style: vue.normalizeStyle(_ctx.customStyle)
+          }, [
+            _ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+              vue.createElementVNode("div", _hoisted_3, [
+                _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                  key: 0,
+                  class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
+              ]),
+              _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+                key: 0,
+                type: "button",
+                class: "el-message-box__headerbtn",
+                "aria-label": "Close",
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel")),
+                onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"]))
+              }, [
+                vue.createVNode(_component_el_icon, { class: "el-message-box__close" }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_close)
+                  ]),
+                  _: 1
+                })
+              ], 32)) : vue.createCommentVNode("v-if", true)
+            ])) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.createElementVNode("div", _hoisted_5, [
+                _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                  key: 0,
+                  class: vue.normalizeClass(["el-message-box__status", _ctx.typeClass])
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+                _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                  vue.renderSlot(_ctx.$slots, "default", {}, () => [
+                    !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("p", {
+                      key: 1,
+                      innerHTML: _ctx.message
+                    }, null, 8, _hoisted_8))
+                  ])
+                ])) : vue.createCommentVNode("v-if", true)
+              ]),
+              vue.withDirectives(vue.createElementVNode("div", _hoisted_9, [
+                vue.createVNode(_component_el_input, {
+                  ref: "inputRef",
+                  modelValue: _ctx.inputValue,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.inputValue = $event),
+                  type: _ctx.inputType,
+                  placeholder: _ctx.inputPlaceholder,
+                  class: vue.normalizeClass({ invalid: _ctx.validateError }),
+                  onKeydown: vue.withKeys(vue.withModifiers(_ctx.handleInputEnter, ["prevent"]), ["enter"])
+                }, null, 8, ["modelValue", "type", "placeholder", "class", "onKeydown"]),
+                vue.createElementVNode("div", {
+                  class: "el-message-box__errormsg",
+                  style: vue.normalizeStyle({
+                    visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
+                  })
+                }, vue.toDisplayString(_ctx.editorErrorMessage), 5)
+              ], 512), [
+                [vue.vShow, _ctx.showInput]
+              ])
+            ]),
+            vue.createElementVNode("div", _hoisted_10, [
+              _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 0,
+                loading: _ctx.cancelButtonLoading,
+                class: vue.normalizeClass([_ctx.cancelButtonClass]),
+                round: _ctx.roundButton,
+                size: _ctx.buttonSize || "small",
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleAction("cancel")),
+                onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"]))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
+                ]),
+                _: 1
+              }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
+              vue.withDirectives(vue.createVNode(_component_el_button, {
+                ref: "confirmRef",
+                loading: _ctx.confirmButtonLoading,
+                class: vue.normalizeClass([_ctx.confirmButtonClasses]),
+                round: _ctx.roundButton,
+                disabled: _ctx.confirmButtonDisabled,
+                size: _ctx.buttonSize || "small",
+                onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleAction("confirm")),
+                onKeydown: _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"]))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
+                ]),
+                _: 1
+              }, 8, ["loading", "class", "round", "disabled", "size"]), [
+                [vue.vShow, _ctx.showConfirmButton]
+              ])
+            ])
+          ], 14, _hoisted_1), [
+            [_directive_trap_focus]
+          ])
+        ]),
+        _: 3
+      }, 8, ["z-index", "overlay-class", "mask", "onClick"]), [
+        [vue.vShow, _ctx.visible]
+      ])
+    ]),
+    _: 3
+  });
+}
+
+exports.render = render;
+//# sourceMappingURL=index.vue_vue_type_template_id_7035e868_lang.js.map

package/lib/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.js","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockScreen,\n  useLocaleInject,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocaleInject()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(\n      () => `el-button--primary ${state.confirmButtonClass}`\n    )\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockScreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createVNode","_createElementVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;EAuBU,OAAM;AAAA;qBAED,OAAM;qBAyBR,OAAM;qBACJ,OAAM;;;EAQc,OAAM;AAAA;;;qBAOP,OAAM;sBAmB3B,OAAM;;;;;;;;0BApFjBA;IAAY,MAAK;AAAA,IAAkB,oDAAa;;yBAC9C;yBAAAC;QAEG,WAAS;QACT,oCAAkC;QAClC,MAAM;QACN,2BAAY;;6BAEb;6BAAAC;YACE,KAAI;AAAA,YAEH,cAAY;YACb,cAAW;AAAA,YACV;;;;;YAKA,0BAAO;;YAGA,uBAAkB,eAAU,2BADpCC,8BAAA;cAIED,8BAAA;gBAEU,sBAAiB,gCADzBF;;kBAEE,2BAAM,0BACE;;uCAER;sCAAAA,4CAAgB;;;;gBAElBE,yDAAS;;cAGH,mCADRC;;gBAEE,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,cAAW;AAAA,gBACV;gBAGA;;gBAIDF,sCAAS,OAAM;uCAAwB;oBAAAA,gBAAS;AAAA;AAAA;;;;YAGpDC,8BAAA;cACEA,8BAAA;gBAEU,uBAAkB,eAAU,oCADpCF;;kBAEE,2BAAM,0BACE;;uCAER;sCAAAA,4CAAgB;;;;gBAEP,oCAAXG,8BAAA;kBACEC,2CAAA;qBACY,kDAAVD,4DAAuC,uCACvCA;;sBAAU,WAAQ;;;;;iCAIxBD,8BAAA;gBACED;kBACE,KAAI;AAAA,8BACK;+EAAA;kBACR,MAAM;kBACN,aAAa;kBACb,qCAAkB;kBAClB,0CAAuB;;gBAE1BC;kBACE,OAAM;AAAA,kBACL;;;uCAIE;;4BAfM;;;YAmBfA,8BAAA;cAEU,0CADRF;;gBAEG,SAAS;gBACT,2BAAQ;gBACR,OAAO;gBACP,MAAM;gBACN,+CAAO;gBACP,gFAAuB;;qCAExB;0DAAG,yBAAoB;;;;iCAEzBC;gBAEE,KAAI;AAAA,gBACH,SAAS;gBACT,2BAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,MAAM;gBACN,+CAAO;gBACP,gFAAuB;;qCAExB;0DAAG,0BAAqB;;;;4BAVhB;;;;;;;;;oBA/FN;;;;;;;;;"}