a361b25edc55c97124d9335484087d49e6e75905f8a9adcf5874c053d59e58f5ed98a544b0f202ed802128f5e35dc2b5f35be44e6b86e9841583477df5b317 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. import { defineComponent, ref, inject, getCurrentInstance, onMounted, watch, computed, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createBlock, withCtx, resolveDynamicComponent, createVNode, toDisplayString, createTextVNode } from 'vue';
  2. import { ElIcon } from '../../icon/index.mjs';
  3. import { Check, Close } from '@element-plus/icons-vue';
  4. import { stepProps } from './item2.mjs';
  5. import { STEPS_INJECTION_KEY } from './tokens.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. import { isNumber } from '../../../utils/types.mjs';
  9. const __default__ = defineComponent({
  10. name: "ElStep"
  11. });
  12. const _sfc_main = defineComponent({
  13. ...__default__,
  14. props: stepProps,
  15. setup(__props) {
  16. const props = __props;
  17. const ns = useNamespace("step");
  18. const index = ref(-1);
  19. const lineStyle = ref({});
  20. const internalStatus = ref("");
  21. const parent = inject(STEPS_INJECTION_KEY);
  22. const currentInstance = getCurrentInstance();
  23. onMounted(() => {
  24. watch([
  25. () => parent.props.active,
  26. () => parent.props.processStatus,
  27. () => parent.props.finishStatus
  28. ], ([active]) => {
  29. updateStatus(active);
  30. }, { immediate: true });
  31. });
  32. const currentStatus = computed(() => {
  33. return props.status || internalStatus.value;
  34. });
  35. const prevInternalStatus = computed(() => {
  36. const prevStep = parent.steps.value[index.value - 1];
  37. return prevStep ? prevStep.internalStatus.value : "wait";
  38. });
  39. const isCenter = computed(() => {
  40. return parent.props.alignCenter;
  41. });
  42. const isVertical = computed(() => {
  43. return parent.props.direction === "vertical";
  44. });
  45. const isSimple = computed(() => {
  46. return parent.props.simple;
  47. });
  48. const stepsCount = computed(() => {
  49. return parent.steps.value.length;
  50. });
  51. const isLast = computed(() => {
  52. var _a;
  53. return ((_a = parent.steps.value[stepsCount.value - 1]) == null ? void 0 : _a.uid) === currentInstance.uid;
  54. });
  55. const space = computed(() => {
  56. return isSimple.value ? "" : parent.props.space;
  57. });
  58. const containerKls = computed(() => {
  59. return [
  60. ns.b(),
  61. ns.is(isSimple.value ? "simple" : parent.props.direction),
  62. ns.is("flex", isLast.value && !space.value && !isCenter.value),
  63. ns.is("center", isCenter.value && !isVertical.value && !isSimple.value)
  64. ];
  65. });
  66. const style = computed(() => {
  67. const style2 = {
  68. flexBasis: isNumber(space.value) ? `${space.value}px` : space.value ? space.value : `${100 / (stepsCount.value - (isCenter.value ? 0 : 1))}%`
  69. };
  70. if (isVertical.value)
  71. return style2;
  72. if (isLast.value) {
  73. style2.maxWidth = `${100 / stepsCount.value}%`;
  74. }
  75. return style2;
  76. });
  77. const setIndex = (val) => {
  78. index.value = val;
  79. };
  80. const calcProgress = (status) => {
  81. const isWait = status === "wait";
  82. const style2 = {
  83. transitionDelay: `${isWait ? "-" : ""}${150 * index.value}ms`
  84. };
  85. const step = status === parent.props.processStatus || isWait ? 0 : 100;
  86. style2.borderWidth = step && !isSimple.value ? "1px" : 0;
  87. style2[parent.props.direction === "vertical" ? "height" : "width"] = `${step}%`;
  88. lineStyle.value = style2;
  89. };
  90. const updateStatus = (activeIndex) => {
  91. if (activeIndex > index.value) {
  92. internalStatus.value = parent.props.finishStatus;
  93. } else if (activeIndex === index.value && prevInternalStatus.value !== "error") {
  94. internalStatus.value = parent.props.processStatus;
  95. } else {
  96. internalStatus.value = "wait";
  97. }
  98. const prevChild = parent.steps.value[index.value - 1];
  99. if (prevChild)
  100. prevChild.calcProgress(internalStatus.value);
  101. };
  102. const stepItemState = {
  103. uid: currentInstance.uid,
  104. getVnode: () => currentInstance.vnode,
  105. currentStatus,
  106. internalStatus,
  107. setIndex,
  108. calcProgress
  109. };
  110. parent.addStep(stepItemState);
  111. onBeforeUnmount(() => {
  112. parent.removeStep(stepItemState);
  113. });
  114. return (_ctx, _cache) => {
  115. return openBlock(), createElementBlock("div", {
  116. style: normalizeStyle(unref(style)),
  117. class: normalizeClass(unref(containerKls))
  118. }, [
  119. createCommentVNode(" icon & line "),
  120. createElementVNode("div", {
  121. class: normalizeClass([unref(ns).e("head"), unref(ns).is(unref(currentStatus))])
  122. }, [
  123. !unref(isSimple) ? (openBlock(), createElementBlock("div", {
  124. key: 0,
  125. class: normalizeClass(unref(ns).e("line"))
  126. }, [
  127. createElementVNode("i", {
  128. class: normalizeClass(unref(ns).e("line-inner")),
  129. style: normalizeStyle(lineStyle.value)
  130. }, null, 6)
  131. ], 2)) : createCommentVNode("v-if", true),
  132. createElementVNode("div", {
  133. class: normalizeClass([unref(ns).e("icon"), unref(ns).is(_ctx.icon || _ctx.$slots.icon ? "icon" : "text")])
  134. }, [
  135. renderSlot(_ctx.$slots, "icon", {}, () => [
  136. _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), {
  137. key: 0,
  138. class: normalizeClass(unref(ns).e("icon-inner"))
  139. }, {
  140. default: withCtx(() => [
  141. (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
  142. ]),
  143. _: 1
  144. }, 8, ["class"])) : unref(currentStatus) === "success" ? (openBlock(), createBlock(unref(ElIcon), {
  145. key: 1,
  146. class: normalizeClass([unref(ns).e("icon-inner"), unref(ns).is("status")])
  147. }, {
  148. default: withCtx(() => [
  149. createVNode(unref(Check))
  150. ]),
  151. _: 1
  152. }, 8, ["class"])) : unref(currentStatus) === "error" ? (openBlock(), createBlock(unref(ElIcon), {
  153. key: 2,
  154. class: normalizeClass([unref(ns).e("icon-inner"), unref(ns).is("status")])
  155. }, {
  156. default: withCtx(() => [
  157. createVNode(unref(Close))
  158. ]),
  159. _: 1
  160. }, 8, ["class"])) : !unref(isSimple) ? (openBlock(), createElementBlock("div", {
  161. key: 3,
  162. class: normalizeClass(unref(ns).e("icon-inner"))
  163. }, toDisplayString(index.value + 1), 3)) : createCommentVNode("v-if", true)
  164. ])
  165. ], 2)
  166. ], 2),
  167. createCommentVNode(" title & description "),
  168. createElementVNode("div", {
  169. class: normalizeClass(unref(ns).e("main"))
  170. }, [
  171. createElementVNode("div", {
  172. class: normalizeClass([unref(ns).e("title"), unref(ns).is(unref(currentStatus))])
  173. }, [
  174. renderSlot(_ctx.$slots, "title", {}, () => [
  175. createTextVNode(toDisplayString(_ctx.title), 1)
  176. ])
  177. ], 2),
  178. unref(isSimple) ? (openBlock(), createElementBlock("div", {
  179. key: 0,
  180. class: normalizeClass(unref(ns).e("arrow"))
  181. }, null, 2)) : (openBlock(), createElementBlock("div", {
  182. key: 1,
  183. class: normalizeClass([unref(ns).e("description"), unref(ns).is(unref(currentStatus))])
  184. }, [
  185. renderSlot(_ctx.$slots, "description", {}, () => [
  186. createTextVNode(toDisplayString(_ctx.description), 1)
  187. ])
  188. ], 2))
  189. ], 2)
  190. ], 6);
  191. };
  192. }
  193. });
  194. var Step = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "item.vue"]]);
  195. export { Step as default };
  196. //# sourceMappingURL=item.mjs.map