step.mjs 6.4 KB

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