dialog2.mjs 7.3 KB

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