217c45814c7edd1ec8090dcd4aba5cdb64586614ae32560a09953e070410d04cb24e179058452f65d04434454da251b59df0c9bcb0c964644cc2987ea1512c 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var index$3 = require('../../overlay/index.js');
  5. var focusTrap = require('../../focus-trap/src/focus-trap.js');
  6. var index$2 = require('../../teleport/index.js');
  7. var dialogContent = require('./dialog-content2.js');
  8. var constants = require('./constants.js');
  9. var dialog = require('./dialog.js');
  10. var useDialog = require('./use-dialog.js');
  11. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  12. var index = require('../../../hooks/use-deprecated/index.js');
  13. var index$1 = require('../../../hooks/use-namespace/index.js');
  14. var index$4 = require('../../../hooks/use-same-target/index.js');
  15. const __default__ = vue.defineComponent({
  16. name: "ElDialog",
  17. inheritAttrs: false
  18. });
  19. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  20. ...__default__,
  21. props: dialog.dialogProps,
  22. emits: dialog.dialogEmits,
  23. setup(__props, { expose }) {
  24. const props = __props;
  25. const slots = vue.useSlots();
  26. index.useDeprecated({
  27. scope: "el-dialog",
  28. from: "the title slot",
  29. replacement: "the header slot",
  30. version: "3.0.0",
  31. ref: "https://element-plus.org/en-US/component/dialog.html#slots"
  32. }, vue.computed(() => !!slots.title));
  33. const ns = index$1.useNamespace("dialog");
  34. const dialogRef = vue.ref();
  35. const headerRef = vue.ref();
  36. const dialogContentRef = vue.ref();
  37. const {
  38. visible,
  39. titleId,
  40. bodyId,
  41. style,
  42. overlayDialogStyle,
  43. rendered,
  44. transitionConfig,
  45. zIndex,
  46. _draggable,
  47. _alignCenter,
  48. _overflow,
  49. handleClose,
  50. onModalClick,
  51. onOpenAutoFocus,
  52. onCloseAutoFocus,
  53. onCloseRequested,
  54. onFocusoutPrevented
  55. } = useDialog.useDialog(props, dialogRef);
  56. vue.provide(constants.dialogInjectionKey, {
  57. dialogRef,
  58. headerRef,
  59. bodyId,
  60. ns,
  61. rendered,
  62. style
  63. });
  64. const overlayEvent = index$4.useSameTarget(onModalClick);
  65. const penetrable = vue.computed(() => props.modalPenetrable && !props.modal && !props.fullscreen);
  66. const resetPosition = () => {
  67. var _a;
  68. (_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition();
  69. };
  70. expose({
  71. visible,
  72. dialogContentRef,
  73. resetPosition,
  74. handleClose
  75. });
  76. return (_ctx, _cache) => {
  77. return vue.openBlock(), vue.createBlock(vue.unref(index$2.ElTeleport), {
  78. to: _ctx.appendTo,
  79. disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
  80. }, {
  81. default: vue.withCtx(() => [
  82. vue.createVNode(vue.Transition, vue.mergeProps(vue.unref(transitionConfig), { persisted: "" }), {
  83. default: vue.withCtx(() => {
  84. var _a;
  85. return [
  86. vue.withDirectives(vue.createVNode(vue.unref(index$3.ElOverlay), {
  87. "custom-mask-event": "",
  88. mask: _ctx.modal,
  89. "overlay-class": [
  90. (_a = _ctx.modalClass) != null ? _a : "",
  91. `${vue.unref(ns).namespace.value}-modal-dialog`,
  92. vue.unref(ns).is("penetrable", vue.unref(penetrable))
  93. ],
  94. "z-index": vue.unref(zIndex)
  95. }, {
  96. default: vue.withCtx(() => [
  97. vue.createElementVNode("div", {
  98. role: "dialog",
  99. "aria-modal": "true",
  100. "aria-label": _ctx.title || void 0,
  101. "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
  102. "aria-describedby": vue.unref(bodyId),
  103. class: vue.normalizeClass(`${vue.unref(ns).namespace.value}-overlay-dialog`),
  104. style: vue.normalizeStyle(vue.unref(overlayDialogStyle)),
  105. onClick: vue.unref(overlayEvent).onClick,
  106. onMousedown: vue.unref(overlayEvent).onMousedown,
  107. onMouseup: vue.unref(overlayEvent).onMouseup
  108. }, [
  109. vue.createVNode(vue.unref(focusTrap["default"]), {
  110. loop: "",
  111. trapped: vue.unref(visible),
  112. "focus-start-el": "container",
  113. onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
  114. onFocusAfterReleased: vue.unref(onCloseAutoFocus),
  115. onFocusoutPrevented: vue.unref(onFocusoutPrevented),
  116. onReleaseRequested: vue.unref(onCloseRequested)
  117. }, {
  118. default: vue.withCtx(() => [
  119. vue.unref(rendered) ? (vue.openBlock(), vue.createBlock(dialogContent["default"], vue.mergeProps({
  120. key: 0,
  121. ref_key: "dialogContentRef",
  122. ref: dialogContentRef
  123. }, _ctx.$attrs, {
  124. center: _ctx.center,
  125. "align-center": vue.unref(_alignCenter),
  126. "close-icon": _ctx.closeIcon,
  127. draggable: vue.unref(_draggable),
  128. overflow: vue.unref(_overflow),
  129. fullscreen: _ctx.fullscreen,
  130. "header-class": _ctx.headerClass,
  131. "body-class": _ctx.bodyClass,
  132. "footer-class": _ctx.footerClass,
  133. "show-close": _ctx.showClose,
  134. title: _ctx.title,
  135. "aria-level": _ctx.headerAriaLevel,
  136. onClose: vue.unref(handleClose)
  137. }), vue.createSlots({
  138. header: vue.withCtx(() => [
  139. !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
  140. key: 0,
  141. close: vue.unref(handleClose),
  142. titleId: vue.unref(titleId),
  143. titleClass: vue.unref(ns).e("title")
  144. }) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
  145. ]),
  146. default: vue.withCtx(() => [
  147. vue.renderSlot(_ctx.$slots, "default")
  148. ]),
  149. _: 2
  150. }, [
  151. _ctx.$slots.footer ? {
  152. name: "footer",
  153. fn: vue.withCtx(() => [
  154. vue.renderSlot(_ctx.$slots, "footer")
  155. ])
  156. } : void 0
  157. ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "aria-level", "onClose"])) : vue.createCommentVNode("v-if", true)
  158. ]),
  159. _: 3
  160. }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
  161. ], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
  162. ]),
  163. _: 3
  164. }, 8, ["mask", "overlay-class", "z-index"]), [
  165. [vue.vShow, vue.unref(visible)]
  166. ])
  167. ];
  168. }),
  169. _: 3
  170. }, 16)
  171. ]),
  172. _: 3
  173. }, 8, ["to", "disabled"]);
  174. };
  175. }
  176. });
  177. var Dialog = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "dialog.vue"]]);
  178. exports["default"] = Dialog;
  179. //# sourceMappingURL=dialog2.js.map