ba3d66f5b728f3c334c8e3a7943af91e0eb6c140874e07d58d8187ef79d906d21ee0dc7fb1d62bcf431db101582243b467c9365ad10aff5cf1104d98f6a850 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import { defineComponent, inject, watch, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, unref, normalizeClass, createVNode, withCtx, createBlock, resolveDynamicComponent, createCommentVNode, createElementVNode, renderSlot, toDisplayString, renderList, mergeProps, createTextVNode } from 'vue';
  2. import { omit } from 'lodash-unified';
  3. import { ElButton } from '../../button/index.mjs';
  4. import { ElIcon } from '../../icon/index.mjs';
  5. import { tourStepProps, tourStepEmits } from './step.mjs';
  6. import { tourKey } from './helper.mjs';
  7. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  8. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  9. import { CloseComponents } from '../../../utils/vue/icon.mjs';
  10. import { EVENT_CODE } from '../../../constants/aria.mjs';
  11. const __default__ = defineComponent({
  12. name: "ElTourStep"
  13. });
  14. const _sfc_main = /* @__PURE__ */ defineComponent({
  15. ...__default__,
  16. props: tourStepProps,
  17. emits: tourStepEmits,
  18. setup(__props, { emit }) {
  19. const props = __props;
  20. const { Close } = CloseComponents;
  21. const { t } = useLocale();
  22. const {
  23. currentStep,
  24. current,
  25. total,
  26. showClose,
  27. closeIcon,
  28. mergedType,
  29. ns,
  30. slots: tourSlots,
  31. updateModelValue,
  32. onClose: tourOnClose,
  33. onFinish: tourOnFinish,
  34. onChange
  35. } = inject(tourKey);
  36. watch(props, (val) => {
  37. currentStep.value = val;
  38. }, {
  39. immediate: true
  40. });
  41. const mergedShowClose = computed(() => {
  42. var _a;
  43. return (_a = props.showClose) != null ? _a : showClose.value;
  44. });
  45. const mergedCloseIcon = computed(() => {
  46. var _a, _b;
  47. return (_b = (_a = props.closeIcon) != null ? _a : closeIcon.value) != null ? _b : Close;
  48. });
  49. const filterButtonProps = (btnProps) => {
  50. if (!btnProps)
  51. return;
  52. return omit(btnProps, ["children", "onClick"]);
  53. };
  54. const onPrev = () => {
  55. var _a, _b;
  56. current.value -= 1;
  57. if ((_a = props.prevButtonProps) == null ? void 0 : _a.onClick) {
  58. (_b = props.prevButtonProps) == null ? void 0 : _b.onClick();
  59. }
  60. onChange();
  61. };
  62. const onNext = () => {
  63. var _a;
  64. if (current.value >= total.value - 1) {
  65. onFinish();
  66. } else {
  67. current.value += 1;
  68. }
  69. if ((_a = props.nextButtonProps) == null ? void 0 : _a.onClick) {
  70. props.nextButtonProps.onClick();
  71. }
  72. onChange();
  73. };
  74. const onFinish = () => {
  75. onClose();
  76. tourOnFinish();
  77. };
  78. const onClose = () => {
  79. updateModelValue(false);
  80. tourOnClose();
  81. emit("close");
  82. };
  83. const handleKeydown = (e) => {
  84. const target = e.target;
  85. if (target == null ? void 0 : target.isContentEditable)
  86. return;
  87. const actions = {
  88. [EVENT_CODE.left]: () => current.value > 0 && onPrev(),
  89. [EVENT_CODE.right]: onNext
  90. };
  91. const action = actions[e.code];
  92. if (action) {
  93. e.preventDefault();
  94. action();
  95. }
  96. };
  97. onMounted(() => {
  98. window.addEventListener("keydown", handleKeydown);
  99. });
  100. onBeforeUnmount(() => {
  101. window.removeEventListener("keydown", handleKeydown);
  102. });
  103. return (_ctx, _cache) => {
  104. return openBlock(), createElementBlock(Fragment, null, [
  105. unref(mergedShowClose) ? (openBlock(), createElementBlock("button", {
  106. key: 0,
  107. "aria-label": unref(t)("el.tour.close"),
  108. class: normalizeClass(unref(ns).e("closebtn")),
  109. type: "button",
  110. onClick: onClose
  111. }, [
  112. createVNode(unref(ElIcon), {
  113. class: normalizeClass(unref(ns).e("close"))
  114. }, {
  115. default: withCtx(() => [
  116. (openBlock(), createBlock(resolveDynamicComponent(unref(mergedCloseIcon))))
  117. ]),
  118. _: 1
  119. }, 8, ["class"])
  120. ], 10, ["aria-label"])) : createCommentVNode("v-if", true),
  121. createElementVNode("header", {
  122. class: normalizeClass([unref(ns).e("header"), { "show-close": unref(showClose) }])
  123. }, [
  124. renderSlot(_ctx.$slots, "header", {}, () => [
  125. createElementVNode("span", {
  126. role: "heading",
  127. class: normalizeClass(unref(ns).e("title"))
  128. }, toDisplayString(_ctx.title), 3)
  129. ])
  130. ], 2),
  131. createElementVNode("div", {
  132. class: normalizeClass(unref(ns).e("body"))
  133. }, [
  134. renderSlot(_ctx.$slots, "default", {}, () => [
  135. createElementVNode("span", null, toDisplayString(_ctx.description), 1)
  136. ])
  137. ], 2),
  138. createElementVNode("footer", {
  139. class: normalizeClass(unref(ns).e("footer"))
  140. }, [
  141. createElementVNode("div", {
  142. class: normalizeClass(unref(ns).b("indicators"))
  143. }, [
  144. unref(tourSlots).indicators ? (openBlock(), createBlock(resolveDynamicComponent(unref(tourSlots).indicators), {
  145. key: 0,
  146. current: unref(current),
  147. total: unref(total)
  148. }, null, 8, ["current", "total"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(total), (item, index) => {
  149. return openBlock(), createElementBlock("span", {
  150. key: item,
  151. class: normalizeClass([unref(ns).b("indicator"), index === unref(current) ? "is-active" : ""])
  152. }, null, 2);
  153. }), 128))
  154. ], 2),
  155. createElementVNode("div", {
  156. class: normalizeClass(unref(ns).b("buttons"))
  157. }, [
  158. unref(current) > 0 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
  159. key: 0,
  160. size: "small",
  161. type: unref(mergedType)
  162. }, filterButtonProps(_ctx.prevButtonProps), { onClick: onPrev }), {
  163. default: withCtx(() => {
  164. var _a, _b;
  165. return [
  166. createTextVNode(toDisplayString((_b = (_a = _ctx.prevButtonProps) == null ? void 0 : _a.children) != null ? _b : unref(t)("el.tour.previous")), 1)
  167. ];
  168. }),
  169. _: 1
  170. }, 16, ["type"])) : createCommentVNode("v-if", true),
  171. unref(current) <= unref(total) - 1 ? (openBlock(), createBlock(unref(ElButton), mergeProps({
  172. key: 1,
  173. size: "small",
  174. type: unref(mergedType) === "primary" ? "default" : "primary"
  175. }, filterButtonProps(_ctx.nextButtonProps), { onClick: onNext }), {
  176. default: withCtx(() => {
  177. var _a, _b;
  178. return [
  179. createTextVNode(toDisplayString((_b = (_a = _ctx.nextButtonProps) == null ? void 0 : _a.children) != null ? _b : unref(current) === unref(total) - 1 ? unref(t)("el.tour.finish") : unref(t)("el.tour.next")), 1)
  180. ];
  181. }),
  182. _: 1
  183. }, 16, ["type"])) : createCommentVNode("v-if", true)
  184. ], 2)
  185. ], 2)
  186. ], 64);
  187. };
  188. }
  189. });
  190. var TourStep = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "step.vue"]]);
  191. export { TourStep as default };
  192. //# sourceMappingURL=step2.mjs.map