bbda459b2f80e481be6b3041ae4465f23b4b25e6834955458bb8ee9a29b945e0a9acf9c45a5a200d492752a2d08d089938fb92091a5d3dde178ee617111f51 7.9 KB

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