fdb7692221b74919b70b97c0f40f3e1642f68008e7394e9fe861a16569f43ca425112b54fec7626d9de9d8d138e0a87b4f32c0f3af5fb3d23e8c5efc8b455d 7.3 KB

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