1eaf358b168833dec5ee91f43dd7d1ef15604ca218d66c4626a51226473a35141f62273f4baa1e1ff4e811409c3c07cc3db840f89cff2c2912227794b838c2 19 KB

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