content2.mjs 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { defineComponent, ref, watch, toRef, computed, inject, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, renderSlot, createCommentVNode } from 'vue';
  2. import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
  3. import { tourContentProps, tourContentEmits } from './content.mjs';
  4. import { useFloating, tourKey } from './helper.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. const __default__ = defineComponent({
  7. name: "ElTourContent"
  8. });
  9. const _sfc_main = /* @__PURE__ */ defineComponent({
  10. ...__default__,
  11. props: tourContentProps,
  12. emits: tourContentEmits,
  13. setup(__props, { emit }) {
  14. const props = __props;
  15. const placement = ref(props.placement);
  16. const strategy = ref(props.strategy);
  17. const contentRef = ref(null);
  18. const arrowRef = ref(null);
  19. watch(() => props.placement, () => {
  20. placement.value = props.placement;
  21. });
  22. const { contentStyle, arrowStyle } = useFloating(toRef(props, "reference"), contentRef, arrowRef, placement, strategy, toRef(props, "offset"), toRef(props, "zIndex"), toRef(props, "showArrow"));
  23. const side = computed(() => {
  24. return placement.value.split("-")[0];
  25. });
  26. const { ns } = inject(tourKey);
  27. const onCloseRequested = () => {
  28. emit("close");
  29. };
  30. const onFocusoutPrevented = (event) => {
  31. if (event.detail.focusReason === "pointer") {
  32. event.preventDefault();
  33. }
  34. };
  35. return (_ctx, _cache) => {
  36. return openBlock(), createElementBlock("div", {
  37. ref_key: "contentRef",
  38. ref: contentRef,
  39. style: normalizeStyle(unref(contentStyle)),
  40. class: normalizeClass(unref(ns).e("content")),
  41. "data-side": unref(side),
  42. tabindex: "-1"
  43. }, [
  44. createVNode(unref(ElFocusTrap), {
  45. loop: "",
  46. trapped: "",
  47. "focus-start-el": "container",
  48. "focus-trap-el": contentRef.value || void 0,
  49. onReleaseRequested: onCloseRequested,
  50. onFocusoutPrevented
  51. }, {
  52. default: withCtx(() => [
  53. renderSlot(_ctx.$slots, "default")
  54. ]),
  55. _: 3
  56. }, 8, ["focus-trap-el"]),
  57. _ctx.showArrow ? (openBlock(), createElementBlock("span", {
  58. key: 0,
  59. ref_key: "arrowRef",
  60. ref: arrowRef,
  61. style: normalizeStyle(unref(arrowStyle)),
  62. class: normalizeClass(unref(ns).e("arrow"))
  63. }, null, 6)) : createCommentVNode("v-if", true)
  64. ], 14, ["data-side"]);
  65. };
  66. }
  67. });
  68. var ElTourContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
  69. export { ElTourContent as default };
  70. //# sourceMappingURL=content2.mjs.map