dialog2.mjs 7.2 KB

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