step2.js 6.6 KB

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