You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
7.4 KiB

1 month ago
  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. zIndex,
  45. afterEnter,
  46. afterLeave,
  47. beforeLeave,
  48. handleClose,
  49. onModalClick,
  50. onOpenAutoFocus,
  51. onCloseAutoFocus,
  52. onCloseRequested,
  53. onFocusoutPrevented
  54. } = useDialog.useDialog(props, dialogRef);
  55. vue.provide(constants.dialogInjectionKey, {
  56. dialogRef,
  57. headerRef,
  58. bodyId,
  59. ns,
  60. rendered,
  61. style
  62. });
  63. const overlayEvent = index$4.useSameTarget(onModalClick);
  64. const draggable = vue.computed(() => props.draggable && !props.fullscreen);
  65. const resetPosition = () => {
  66. var _a;
  67. (_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition();
  68. };
  69. expose({
  70. visible,
  71. dialogContentRef,
  72. resetPosition
  73. });
  74. return (_ctx, _cache) => {
  75. return vue.openBlock(), vue.createBlock(vue.unref(index$2.ElTeleport), {
  76. to: _ctx.appendTo,
  77. disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
  78. }, {
  79. default: vue.withCtx(() => [
  80. vue.createVNode(vue.Transition, {
  81. name: "dialog-fade",
  82. onAfterEnter: vue.unref(afterEnter),
  83. onAfterLeave: vue.unref(afterLeave),
  84. onBeforeLeave: vue.unref(beforeLeave),
  85. persisted: ""
  86. }, {
  87. default: vue.withCtx(() => [
  88. vue.withDirectives(vue.createVNode(vue.unref(index$3.ElOverlay), {
  89. "custom-mask-event": "",
  90. mask: _ctx.modal,
  91. "overlay-class": _ctx.modalClass,
  92. "z-index": vue.unref(zIndex)
  93. }, {
  94. default: vue.withCtx(() => [
  95. vue.createElementVNode("div", {
  96. role: "dialog",
  97. "aria-modal": "true",
  98. "aria-label": _ctx.title || void 0,
  99. "aria-labelledby": !_ctx.title ? vue.unref(titleId) : void 0,
  100. "aria-describedby": vue.unref(bodyId),
  101. class: vue.normalizeClass(`${vue.unref(ns).namespace.value}-overlay-dialog`),
  102. style: vue.normalizeStyle(vue.unref(overlayDialogStyle)),
  103. onClick: vue.unref(overlayEvent).onClick,
  104. onMousedown: vue.unref(overlayEvent).onMousedown,
  105. onMouseup: vue.unref(overlayEvent).onMouseup
  106. }, [
  107. vue.createVNode(vue.unref(focusTrap["default"]), {
  108. loop: "",
  109. trapped: vue.unref(visible),
  110. "focus-start-el": "container",
  111. onFocusAfterTrapped: vue.unref(onOpenAutoFocus),
  112. onFocusAfterReleased: vue.unref(onCloseAutoFocus),
  113. onFocusoutPrevented: vue.unref(onFocusoutPrevented),
  114. onReleaseRequested: vue.unref(onCloseRequested)
  115. }, {
  116. default: vue.withCtx(() => [
  117. vue.unref(rendered) ? (vue.openBlock(), vue.createBlock(dialogContent["default"], vue.mergeProps({
  118. key: 0,
  119. ref_key: "dialogContentRef",
  120. ref: dialogContentRef
  121. }, _ctx.$attrs, {
  122. center: _ctx.center,
  123. "align-center": _ctx.alignCenter,
  124. "close-icon": _ctx.closeIcon,
  125. draggable: vue.unref(draggable),
  126. overflow: _ctx.overflow,
  127. fullscreen: _ctx.fullscreen,
  128. "header-class": _ctx.headerClass,
  129. "body-class": _ctx.bodyClass,
  130. "footer-class": _ctx.footerClass,
  131. "show-close": _ctx.showClose,
  132. title: _ctx.title,
  133. "aria-level": _ctx.headerAriaLevel,
  134. onClose: vue.unref(handleClose)
  135. }), vue.createSlots({
  136. header: vue.withCtx(() => [
  137. !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
  138. key: 0,
  139. close: vue.unref(handleClose),
  140. titleId: vue.unref(titleId),
  141. titleClass: vue.unref(ns).e("title")
  142. }) : vue.renderSlot(_ctx.$slots, "title", { key: 1 })
  143. ]),
  144. default: vue.withCtx(() => [
  145. vue.renderSlot(_ctx.$slots, "default")
  146. ]),
  147. _: 2
  148. }, [
  149. _ctx.$slots.footer ? {
  150. name: "footer",
  151. fn: vue.withCtx(() => [
  152. vue.renderSlot(_ctx.$slots, "footer")
  153. ])
  154. } : void 0
  155. ]), 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)
  156. ]),
  157. _: 3
  158. }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
  159. ], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
  160. ]),
  161. _: 3
  162. }, 8, ["mask", "overlay-class", "z-index"]), [
  163. [vue.vShow, vue.unref(visible)]
  164. ])
  165. ]),
  166. _: 3
  167. }, 8, ["onAfterEnter", "onAfterLeave", "onBeforeLeave"])
  168. ]),
  169. _: 3
  170. }, 8, ["to", "disabled"]);
  171. };
  172. }
  173. });
  174. var Dialog = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "dialog.vue"]]);
  175. exports["default"] = Dialog;
  176. //# sourceMappingURL=dialog2.js.map