dialog-content2.mjs 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { defineComponent, inject, computed, openBlock, createElementBlock, unref, normalizeClass, normalizeStyle, createElementVNode, renderSlot, toDisplayString, createVNode, withCtx, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
  2. import { ElIcon } from '../../icon/index.mjs';
  3. import { dialogInjectionKey } from './constants.mjs';
  4. import { dialogContentProps, dialogContentEmits } from './dialog-content.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { FOCUS_TRAP_INJECTION_KEY } from '../../focus-trap/src/tokens.mjs';
  7. import { useDraggable } from '../../../hooks/use-draggable/index.mjs';
  8. import { CloseComponents } from '../../../utils/vue/icon.mjs';
  9. import { composeRefs } from '../../../utils/vue/refs.mjs';
  10. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  11. const __default__ = defineComponent({ name: "ElDialogContent" });
  12. const _sfc_main = /* @__PURE__ */ defineComponent({
  13. ...__default__,
  14. props: dialogContentProps,
  15. emits: dialogContentEmits,
  16. setup(__props, { expose }) {
  17. const props = __props;
  18. const { t } = useLocale();
  19. const { Close } = CloseComponents;
  20. const { dialogRef, headerRef, bodyId, ns, style } = inject(dialogInjectionKey);
  21. const { focusTrapRef } = inject(FOCUS_TRAP_INJECTION_KEY);
  22. const dialogKls = computed(() => [
  23. ns.b(),
  24. ns.is("fullscreen", props.fullscreen),
  25. ns.is("draggable", props.draggable),
  26. ns.is("align-center", props.alignCenter),
  27. { [ns.m("center")]: props.center }
  28. ]);
  29. const composedDialogRef = composeRefs(focusTrapRef, dialogRef);
  30. const draggable = computed(() => props.draggable);
  31. const overflow = computed(() => props.overflow);
  32. const { resetPosition, updatePosition } = useDraggable(dialogRef, headerRef, draggable, overflow);
  33. expose({
  34. resetPosition,
  35. updatePosition
  36. });
  37. return (_ctx, _cache) => {
  38. return openBlock(), createElementBlock("div", {
  39. ref: unref(composedDialogRef),
  40. class: normalizeClass(unref(dialogKls)),
  41. style: normalizeStyle(unref(style)),
  42. tabindex: "-1"
  43. }, [
  44. createElementVNode("header", {
  45. ref_key: "headerRef",
  46. ref: headerRef,
  47. class: normalizeClass([unref(ns).e("header"), _ctx.headerClass, { "show-close": _ctx.showClose }])
  48. }, [
  49. renderSlot(_ctx.$slots, "header", {}, () => [
  50. createElementVNode("span", {
  51. role: "heading",
  52. "aria-level": _ctx.ariaLevel,
  53. class: normalizeClass(unref(ns).e("title"))
  54. }, toDisplayString(_ctx.title), 11, ["aria-level"])
  55. ]),
  56. _ctx.showClose ? (openBlock(), createElementBlock("button", {
  57. key: 0,
  58. "aria-label": unref(t)("el.dialog.close"),
  59. class: normalizeClass(unref(ns).e("headerbtn")),
  60. type: "button",
  61. onClick: ($event) => _ctx.$emit("close")
  62. }, [
  63. createVNode(unref(ElIcon), {
  64. class: normalizeClass(unref(ns).e("close"))
  65. }, {
  66. default: withCtx(() => [
  67. (openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon || unref(Close))))
  68. ]),
  69. _: 1
  70. }, 8, ["class"])
  71. ], 10, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
  72. ], 2),
  73. createElementVNode("div", {
  74. id: unref(bodyId),
  75. class: normalizeClass([unref(ns).e("body"), _ctx.bodyClass])
  76. }, [
  77. renderSlot(_ctx.$slots, "default")
  78. ], 10, ["id"]),
  79. _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", {
  80. key: 0,
  81. class: normalizeClass([unref(ns).e("footer"), _ctx.footerClass])
  82. }, [
  83. renderSlot(_ctx.$slots, "footer")
  84. ], 2)) : createCommentVNode("v-if", true)
  85. ], 6);
  86. };
  87. }
  88. });
  89. var ElDialogContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dialog-content.vue"]]);
  90. export { ElDialogContent as default };
  91. //# sourceMappingURL=dialog-content2.mjs.map