tour2.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var index$2 = require('../../teleport/index.js');
  6. var mask = require('./mask2.js');
  7. var content = require('./content.js');
  8. var steps = require('./steps.js');
  9. var tour = require('./tour.js');
  10. var helper = require('./helper.js');
  11. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  12. var index = require('../../../hooks/use-namespace/index.js');
  13. var types = require('../../../utils/types.js');
  14. var index$1 = require('../../../hooks/use-z-index/index.js');
  15. var event = require('../../../constants/event.js');
  16. const __default__ = vue.defineComponent({
  17. name: "ElTour"
  18. });
  19. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  20. ...__default__,
  21. props: tour.tourProps,
  22. emits: tour.tourEmits,
  23. setup(__props, { emit }) {
  24. const props = __props;
  25. const ns = index.useNamespace("tour");
  26. const total = vue.ref(0);
  27. const currentStep = vue.ref();
  28. const current = core.useVModel(props, "current", emit, {
  29. passive: true
  30. });
  31. const currentTarget = vue.computed(() => {
  32. var _a;
  33. return (_a = currentStep.value) == null ? void 0 : _a.target;
  34. });
  35. const kls = vue.computed(() => [
  36. ns.b(),
  37. mergedType.value === "primary" ? ns.m("primary") : ""
  38. ]);
  39. const mergedPlacement = vue.computed(() => {
  40. var _a;
  41. return ((_a = currentStep.value) == null ? void 0 : _a.placement) || props.placement;
  42. });
  43. const mergedContentStyle = vue.computed(() => {
  44. var _a, _b;
  45. return (_b = (_a = currentStep.value) == null ? void 0 : _a.contentStyle) != null ? _b : props.contentStyle;
  46. });
  47. const mergedMask = vue.computed(() => {
  48. var _a, _b;
  49. return (_b = (_a = currentStep.value) == null ? void 0 : _a.mask) != null ? _b : props.mask;
  50. });
  51. const mergedShowMask = vue.computed(() => !!mergedMask.value && props.modelValue);
  52. const mergedMaskStyle = vue.computed(() => types.isBoolean(mergedMask.value) ? void 0 : mergedMask.value);
  53. const mergedShowArrow = vue.computed(() => {
  54. var _a, _b;
  55. return !!currentTarget.value && ((_b = (_a = currentStep.value) == null ? void 0 : _a.showArrow) != null ? _b : props.showArrow);
  56. });
  57. const mergedScrollIntoViewOptions = vue.computed(() => {
  58. var _a, _b;
  59. return (_b = (_a = currentStep.value) == null ? void 0 : _a.scrollIntoViewOptions) != null ? _b : props.scrollIntoViewOptions;
  60. });
  61. const mergedType = vue.computed(() => {
  62. var _a, _b;
  63. return (_b = (_a = currentStep.value) == null ? void 0 : _a.type) != null ? _b : props.type;
  64. });
  65. const { nextZIndex } = index$1.useZIndex();
  66. const nowZIndex = nextZIndex();
  67. const mergedZIndex = vue.computed(() => {
  68. var _a;
  69. return (_a = props.zIndex) != null ? _a : nowZIndex;
  70. });
  71. const { mergedPosInfo: pos, triggerTarget } = helper.useTarget(currentTarget, vue.toRef(props, "modelValue"), vue.toRef(props, "gap"), mergedMask, mergedScrollIntoViewOptions);
  72. vue.watch(() => props.modelValue, (val) => {
  73. if (!val) {
  74. current.value = 0;
  75. }
  76. });
  77. const onEscClose = () => {
  78. if (props.closeOnPressEscape) {
  79. emit(event.UPDATE_MODEL_EVENT, false);
  80. emit("close", current.value);
  81. }
  82. };
  83. const onUpdateTotal = (val) => {
  84. total.value = val;
  85. };
  86. const slots = vue.useSlots();
  87. vue.provide(helper.tourKey, {
  88. currentStep,
  89. current,
  90. total,
  91. showClose: vue.toRef(props, "showClose"),
  92. closeIcon: vue.toRef(props, "closeIcon"),
  93. mergedType,
  94. ns,
  95. slots,
  96. updateModelValue(modelValue) {
  97. emit(event.UPDATE_MODEL_EVENT, modelValue);
  98. },
  99. onClose() {
  100. emit("close", current.value);
  101. },
  102. onFinish() {
  103. emit("finish");
  104. },
  105. onChange() {
  106. emit(event.CHANGE_EVENT, current.value);
  107. }
  108. });
  109. return (_ctx, _cache) => {
  110. return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
  111. vue.createVNode(vue.unref(index$2.ElTeleport), { to: _ctx.appendTo }, {
  112. default: vue.withCtx(() => {
  113. var _a, _b;
  114. return [
  115. vue.createElementVNode("div", vue.mergeProps({ class: vue.unref(kls) }, _ctx.$attrs), [
  116. vue.createVNode(mask["default"], {
  117. visible: vue.unref(mergedShowMask),
  118. fill: (_a = vue.unref(mergedMaskStyle)) == null ? void 0 : _a.color,
  119. style: vue.normalizeStyle((_b = vue.unref(mergedMaskStyle)) == null ? void 0 : _b.style),
  120. pos: vue.unref(pos),
  121. "z-index": vue.unref(mergedZIndex),
  122. "target-area-clickable": _ctx.targetAreaClickable
  123. }, null, 8, ["visible", "fill", "style", "pos", "z-index", "target-area-clickable"]),
  124. _ctx.modelValue ? (vue.openBlock(), vue.createBlock(content["default"], {
  125. key: vue.unref(current),
  126. reference: vue.unref(triggerTarget),
  127. placement: vue.unref(mergedPlacement),
  128. "show-arrow": vue.unref(mergedShowArrow),
  129. "z-index": vue.unref(mergedZIndex),
  130. style: vue.normalizeStyle(vue.unref(mergedContentStyle)),
  131. onClose: onEscClose
  132. }, {
  133. default: vue.withCtx(() => [
  134. vue.createVNode(vue.unref(steps["default"]), {
  135. current: vue.unref(current),
  136. onUpdateTotal
  137. }, {
  138. default: vue.withCtx(() => [
  139. vue.renderSlot(_ctx.$slots, "default")
  140. ]),
  141. _: 3
  142. }, 8, ["current"])
  143. ]),
  144. _: 3
  145. }, 8, ["reference", "placement", "show-arrow", "z-index", "style"])) : vue.createCommentVNode("v-if", true)
  146. ], 16)
  147. ];
  148. }),
  149. _: 3
  150. }, 8, ["to"]),
  151. vue.createCommentVNode(" just for IDE "),
  152. vue.createCommentVNode("v-if", true)
  153. ], 64);
  154. };
  155. }
  156. });
  157. var Tour = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "tour.vue"]]);
  158. exports["default"] = Tour;
  159. //# sourceMappingURL=tour2.js.map