content.js 2.7 KB

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