1ccfc7f43cfea09c1231a884c508adfa8d839a76bc6b7993b156b0670a896319da7dacc18a8cc898408c8f1ff1097e5691b88a2f3814283284660f02e2bd1b 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index$1 = require('../../button/index.js');
  5. var index$2 = require('../../input/index.js');
  6. var index$3 = require('../../overlay/index.js');
  7. var index$4 = require('../../icon/index.js');
  8. var iconsVue = require('@element-plus/icons-vue');
  9. var focusTrap = require('../../focus-trap/src/focus-trap.js');
  10. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  11. var index = require('../../../directives/trap-focus/index.js');
  12. var icon = require('../../../utils/vue/icon.js');
  13. var validator = require('../../../utils/vue/validator.js');
  14. var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
  15. var index$5 = require('../../../hooks/use-id/index.js');
  16. var index$6 = require('../../../hooks/use-draggable/index.js');
  17. var shared = require('@vue/shared');
  18. var index$7 = require('../../../hooks/use-lockscreen/index.js');
  19. var index$8 = require('../../../hooks/use-same-target/index.js');
  20. const _sfc_main = vue.defineComponent({
  21. name: "ElMessageBox",
  22. directives: {
  23. TrapFocus: index["default"]
  24. },
  25. components: {
  26. ElButton: index$1.ElButton,
  27. ElFocusTrap: focusTrap["default"],
  28. ElInput: index$2.ElInput,
  29. ElOverlay: index$3.ElOverlay,
  30. ElIcon: index$4.ElIcon,
  31. ...icon.TypeComponents
  32. },
  33. inheritAttrs: false,
  34. props: {
  35. buttonSize: {
  36. type: String,
  37. validator: validator.isValidComponentSize
  38. },
  39. modal: {
  40. type: Boolean,
  41. default: true
  42. },
  43. lockScroll: {
  44. type: Boolean,
  45. default: true
  46. },
  47. showClose: {
  48. type: Boolean,
  49. default: true
  50. },
  51. closeOnClickModal: {
  52. type: Boolean,
  53. default: true
  54. },
  55. closeOnPressEscape: {
  56. type: Boolean,
  57. default: true
  58. },
  59. closeOnHashChange: {
  60. type: Boolean,
  61. default: true
  62. },
  63. center: Boolean,
  64. draggable: Boolean,
  65. overflow: Boolean,
  66. roundButton: Boolean,
  67. container: {
  68. type: String,
  69. default: "body"
  70. },
  71. boxType: {
  72. type: String,
  73. default: ""
  74. }
  75. },
  76. emits: ["vanish", "action"],
  77. setup(props, { emit }) {
  78. const {
  79. locale,
  80. zIndex,
  81. ns,
  82. size: btnSize
  83. } = useGlobalConfig.useGlobalComponentSettings("message-box", vue.computed(() => props.buttonSize));
  84. const { t } = locale;
  85. const { nextZIndex } = zIndex;
  86. const visible = vue.ref(false);
  87. const state = vue.reactive({
  88. autofocus: true,
  89. beforeClose: null,
  90. callback: null,
  91. cancelButtonText: "",
  92. cancelButtonClass: "",
  93. confirmButtonText: "",
  94. confirmButtonClass: "",
  95. customClass: "",
  96. customStyle: {},
  97. dangerouslyUseHTMLString: false,
  98. distinguishCancelAndClose: false,
  99. icon: "",
  100. closeIcon: "",
  101. inputPattern: null,
  102. inputPlaceholder: "",
  103. inputType: "text",
  104. inputValue: "",
  105. inputValidator: void 0,
  106. inputErrorMessage: "",
  107. message: "",
  108. modalFade: true,
  109. modalClass: "",
  110. showCancelButton: false,
  111. showConfirmButton: true,
  112. type: "",
  113. title: void 0,
  114. showInput: false,
  115. action: "",
  116. confirmButtonLoading: false,
  117. cancelButtonLoading: false,
  118. confirmButtonLoadingIcon: vue.markRaw(iconsVue.Loading),
  119. cancelButtonLoadingIcon: vue.markRaw(iconsVue.Loading),
  120. confirmButtonDisabled: false,
  121. editorErrorMessage: "",
  122. validateError: false,
  123. zIndex: nextZIndex()
  124. });
  125. const typeClass = vue.computed(() => {
  126. const type = state.type;
  127. return { [ns.bm("icon", type)]: type && icon.TypeComponentsMap[type] };
  128. });
  129. const contentId = index$5.useId();
  130. const inputId = index$5.useId();
  131. const iconComponent = vue.computed(() => {
  132. const type = state.type;
  133. return state.icon || type && icon.TypeComponentsMap[type] || "";
  134. });
  135. const hasMessage = vue.computed(() => !!state.message);
  136. const rootRef = vue.ref();
  137. const headerRef = vue.ref();
  138. const focusStartRef = vue.ref();
  139. const inputRef = vue.ref();
  140. const confirmRef = vue.ref();
  141. const confirmButtonClasses = vue.computed(() => state.confirmButtonClass);
  142. vue.watch(() => state.inputValue, async (val) => {
  143. await vue.nextTick();
  144. if (props.boxType === "prompt" && val) {
  145. validate();
  146. }
  147. }, { immediate: true });
  148. vue.watch(() => visible.value, (val) => {
  149. var _a, _b;
  150. if (val) {
  151. if (props.boxType !== "prompt") {
  152. if (state.autofocus) {
  153. focusStartRef.value = (_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) != null ? _b : rootRef.value;
  154. } else {
  155. focusStartRef.value = rootRef.value;
  156. }
  157. }
  158. state.zIndex = nextZIndex();
  159. }
  160. if (props.boxType !== "prompt")
  161. return;
  162. if (val) {
  163. vue.nextTick().then(() => {
  164. var _a2;
  165. if (inputRef.value && inputRef.value.$el) {
  166. if (state.autofocus) {
  167. focusStartRef.value = (_a2 = getInputElement()) != null ? _a2 : rootRef.value;
  168. } else {
  169. focusStartRef.value = rootRef.value;
  170. }
  171. }
  172. });
  173. } else {
  174. state.editorErrorMessage = "";
  175. state.validateError = false;
  176. }
  177. });
  178. const draggable = vue.computed(() => props.draggable);
  179. const overflow = vue.computed(() => props.overflow);
  180. const { isDragging } = index$6.useDraggable(rootRef, headerRef, draggable, overflow);
  181. vue.onMounted(async () => {
  182. await vue.nextTick();
  183. if (props.closeOnHashChange) {
  184. window.addEventListener("hashchange", doClose);
  185. }
  186. });
  187. vue.onBeforeUnmount(() => {
  188. if (props.closeOnHashChange) {
  189. window.removeEventListener("hashchange", doClose);
  190. }
  191. });
  192. function doClose() {
  193. if (!visible.value)
  194. return;
  195. visible.value = false;
  196. vue.nextTick(() => {
  197. if (state.action)
  198. emit("action", state.action);
  199. });
  200. }
  201. const handleWrapperClick = () => {
  202. if (props.closeOnClickModal) {
  203. handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
  204. }
  205. };
  206. const overlayEvent = index$8.useSameTarget(handleWrapperClick);
  207. const handleInputEnter = (e) => {
  208. if (state.inputType !== "textarea") {
  209. e.preventDefault();
  210. return handleAction("confirm");
  211. }
  212. };
  213. const handleAction = (action) => {
  214. var _a;
  215. if (props.boxType === "prompt" && action === "confirm" && !validate()) {
  216. return;
  217. }
  218. state.action = action;
  219. if (state.beforeClose) {
  220. (_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose);
  221. } else {
  222. doClose();
  223. }
  224. };
  225. const validate = () => {
  226. if (props.boxType === "prompt") {
  227. const inputPattern = state.inputPattern;
  228. if (inputPattern && !inputPattern.test(state.inputValue || "")) {
  229. state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
  230. state.validateError = true;
  231. return false;
  232. }
  233. const inputValidator = state.inputValidator;
  234. if (shared.isFunction(inputValidator)) {
  235. const validateResult = inputValidator(state.inputValue);
  236. if (validateResult === false) {
  237. state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
  238. state.validateError = true;
  239. return false;
  240. }
  241. if (shared.isString(validateResult)) {
  242. state.editorErrorMessage = validateResult;
  243. state.validateError = true;
  244. return false;
  245. }
  246. }
  247. }
  248. state.editorErrorMessage = "";
  249. state.validateError = false;
  250. return true;
  251. };
  252. const getInputElement = () => {
  253. var _a, _b;
  254. const inputRefs = (_a = inputRef.value) == null ? void 0 : _a.$refs;
  255. return (_b = inputRefs == null ? void 0 : inputRefs.input) != null ? _b : inputRefs == null ? void 0 : inputRefs.textarea;
  256. };
  257. const handleClose = () => {
  258. handleAction("close");
  259. };
  260. const onCloseRequested = () => {
  261. if (props.closeOnPressEscape) {
  262. handleClose();
  263. }
  264. };
  265. if (props.lockScroll) {
  266. index$7.useLockscreen(visible);
  267. }
  268. return {
  269. ...vue.toRefs(state),
  270. ns,
  271. overlayEvent,
  272. visible,
  273. hasMessage,
  274. typeClass,
  275. contentId,
  276. inputId,
  277. btnSize,
  278. iconComponent,
  279. confirmButtonClasses,
  280. rootRef,
  281. focusStartRef,
  282. headerRef,
  283. inputRef,
  284. isDragging,
  285. confirmRef,
  286. doClose,
  287. handleClose,
  288. onCloseRequested,
  289. handleWrapperClick,
  290. handleInputEnter,
  291. handleAction,
  292. t
  293. };
  294. }
  295. });
  296. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  297. const _component_el_icon = vue.resolveComponent("el-icon");
  298. const _component_el_input = vue.resolveComponent("el-input");
  299. const _component_el_button = vue.resolveComponent("el-button");
  300. const _component_el_focus_trap = vue.resolveComponent("el-focus-trap");
  301. const _component_el_overlay = vue.resolveComponent("el-overlay");
  302. return vue.openBlock(), vue.createBlock(vue.Transition, {
  303. name: "fade-in-linear",
  304. onAfterLeave: ($event) => _ctx.$emit("vanish"),
  305. persisted: ""
  306. }, {
  307. default: vue.withCtx(() => [
  308. vue.withDirectives(vue.createVNode(_component_el_overlay, {
  309. "z-index": _ctx.zIndex,
  310. "overlay-class": [_ctx.ns.is("message-box"), _ctx.modalClass],
  311. mask: _ctx.modal
  312. }, {
  313. default: vue.withCtx(() => [
  314. vue.createElementVNode("div", {
  315. role: "dialog",
  316. "aria-label": _ctx.title,
  317. "aria-modal": "true",
  318. "aria-describedby": !_ctx.showInput ? _ctx.contentId : void 0,
  319. class: vue.normalizeClass(`${_ctx.ns.namespace.value}-overlay-message-box`),
  320. onClick: _ctx.overlayEvent.onClick,
  321. onMousedown: _ctx.overlayEvent.onMousedown,
  322. onMouseup: _ctx.overlayEvent.onMouseup
  323. }, [
  324. vue.createVNode(_component_el_focus_trap, {
  325. loop: "",
  326. trapped: _ctx.visible,
  327. "focus-trap-el": _ctx.rootRef,
  328. "focus-start-el": _ctx.focusStartRef,
  329. onReleaseRequested: _ctx.onCloseRequested
  330. }, {
  331. default: vue.withCtx(() => [
  332. vue.createElementVNode("div", {
  333. ref: "rootRef",
  334. class: vue.normalizeClass([
  335. _ctx.ns.b(),
  336. _ctx.customClass,
  337. _ctx.ns.is("draggable", _ctx.draggable),
  338. _ctx.ns.is("dragging", _ctx.isDragging),
  339. { [_ctx.ns.m("center")]: _ctx.center }
  340. ]),
  341. style: vue.normalizeStyle(_ctx.customStyle),
  342. tabindex: "-1",
  343. onClick: vue.withModifiers(() => {
  344. }, ["stop"])
  345. }, [
  346. _ctx.title !== null && _ctx.title !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", {
  347. key: 0,
  348. ref: "headerRef",
  349. class: vue.normalizeClass([_ctx.ns.e("header"), { "show-close": _ctx.showClose }])
  350. }, [
  351. vue.createElementVNode("div", {
  352. class: vue.normalizeClass(_ctx.ns.e("title"))
  353. }, [
  354. _ctx.iconComponent && _ctx.center ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
  355. key: 0,
  356. class: vue.normalizeClass([_ctx.ns.e("status"), _ctx.typeClass])
  357. }, {
  358. default: vue.withCtx(() => [
  359. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
  360. ]),
  361. _: 1
  362. }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
  363. vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
  364. ], 2),
  365. _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
  366. key: 0,
  367. type: "button",
  368. class: vue.normalizeClass(_ctx.ns.e("headerbtn")),
  369. "aria-label": _ctx.t("el.messagebox.close"),
  370. onClick: ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"),
  371. onKeydown: vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"])
  372. }, [
  373. vue.createVNode(_component_el_icon, {
  374. class: vue.normalizeClass(_ctx.ns.e("close"))
  375. }, {
  376. default: vue.withCtx(() => [
  377. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon || "close")))
  378. ]),
  379. _: 1
  380. }, 8, ["class"])
  381. ], 42, ["aria-label", "onClick", "onKeydown"])) : vue.createCommentVNode("v-if", true)
  382. ], 2)) : vue.createCommentVNode("v-if", true),
  383. vue.createElementVNode("div", {
  384. id: _ctx.contentId,
  385. class: vue.normalizeClass(_ctx.ns.e("content"))
  386. }, [
  387. vue.createElementVNode("div", {
  388. class: vue.normalizeClass(_ctx.ns.e("container"))
  389. }, [
  390. _ctx.iconComponent && !_ctx.center && _ctx.hasMessage ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
  391. key: 0,
  392. class: vue.normalizeClass([_ctx.ns.e("status"), _ctx.typeClass])
  393. }, {
  394. default: vue.withCtx(() => [
  395. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
  396. ]),
  397. _: 1
  398. }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
  399. _ctx.hasMessage ? (vue.openBlock(), vue.createElementBlock("div", {
  400. key: 1,
  401. class: vue.normalizeClass(_ctx.ns.e("message"))
  402. }, [
  403. vue.renderSlot(_ctx.$slots, "default", {}, () => [
  404. !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
  405. key: 0,
  406. for: _ctx.showInput ? _ctx.inputId : void 0,
  407. textContent: vue.toDisplayString(_ctx.message)
  408. }, null, 8, ["for", "textContent"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.showInput ? "label" : "p"), {
  409. key: 1,
  410. for: _ctx.showInput ? _ctx.inputId : void 0,
  411. innerHTML: _ctx.message
  412. }, null, 8, ["for", "innerHTML"]))
  413. ])
  414. ], 2)) : vue.createCommentVNode("v-if", true)
  415. ], 2),
  416. vue.withDirectives(vue.createElementVNode("div", {
  417. class: vue.normalizeClass(_ctx.ns.e("input"))
  418. }, [
  419. vue.createVNode(_component_el_input, {
  420. id: _ctx.inputId,
  421. ref: "inputRef",
  422. modelValue: _ctx.inputValue,
  423. "onUpdate:modelValue": ($event) => _ctx.inputValue = $event,
  424. type: _ctx.inputType,
  425. placeholder: _ctx.inputPlaceholder,
  426. "aria-invalid": _ctx.validateError,
  427. class: vue.normalizeClass({ invalid: _ctx.validateError }),
  428. onKeydown: vue.withKeys(_ctx.handleInputEnter, ["enter"])
  429. }, null, 8, ["id", "modelValue", "onUpdate:modelValue", "type", "placeholder", "aria-invalid", "class", "onKeydown"]),
  430. vue.createElementVNode("div", {
  431. class: vue.normalizeClass(_ctx.ns.e("errormsg")),
  432. style: vue.normalizeStyle({
  433. visibility: !!_ctx.editorErrorMessage ? "visible" : "hidden"
  434. })
  435. }, vue.toDisplayString(_ctx.editorErrorMessage), 7)
  436. ], 2), [
  437. [vue.vShow, _ctx.showInput]
  438. ])
  439. ], 10, ["id"]),
  440. vue.createElementVNode("div", {
  441. class: vue.normalizeClass(_ctx.ns.e("btns"))
  442. }, [
  443. _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_el_button, {
  444. key: 0,
  445. loading: _ctx.cancelButtonLoading,
  446. "loading-icon": _ctx.cancelButtonLoadingIcon,
  447. class: vue.normalizeClass([_ctx.cancelButtonClass]),
  448. round: _ctx.roundButton,
  449. size: _ctx.btnSize,
  450. onClick: ($event) => _ctx.handleAction("cancel"),
  451. onKeydown: vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"])
  452. }, {
  453. default: vue.withCtx(() => [
  454. vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("el.messagebox.cancel")), 1)
  455. ]),
  456. _: 1
  457. }, 8, ["loading", "loading-icon", "class", "round", "size", "onClick", "onKeydown"])) : vue.createCommentVNode("v-if", true),
  458. vue.withDirectives(vue.createVNode(_component_el_button, {
  459. ref: "confirmRef",
  460. type: "primary",
  461. loading: _ctx.confirmButtonLoading,
  462. "loading-icon": _ctx.confirmButtonLoadingIcon,
  463. class: vue.normalizeClass([_ctx.confirmButtonClasses]),
  464. round: _ctx.roundButton,
  465. disabled: _ctx.confirmButtonDisabled,
  466. size: _ctx.btnSize,
  467. onClick: ($event) => _ctx.handleAction("confirm"),
  468. onKeydown: vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"])
  469. }, {
  470. default: vue.withCtx(() => [
  471. vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("el.messagebox.confirm")), 1)
  472. ]),
  473. _: 1
  474. }, 8, ["loading", "loading-icon", "class", "round", "disabled", "size", "onClick", "onKeydown"]), [
  475. [vue.vShow, _ctx.showConfirmButton]
  476. ])
  477. ], 2)
  478. ], 14, ["onClick"])
  479. ]),
  480. _: 3
  481. }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
  482. ], 42, ["aria-label", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
  483. ]),
  484. _: 3
  485. }, 8, ["z-index", "overlay-class", "mask"]), [
  486. [vue.vShow, _ctx.visible]
  487. ])
  488. ]),
  489. _: 3
  490. }, 8, ["onAfterLeave"]);
  491. }
  492. var MessageBoxConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "index.vue"]]);
  493. exports["default"] = MessageBoxConstructor;
  494. //# sourceMappingURL=index.js.map