Steps.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import PropTypes from '../_util/vue-types';
  13. import { defineComponent } from 'vue';
  14. import classNames from '../_util/classNames';
  15. import Step from './Step';
  16. import { functionType, stringType } from '../_util/type';
  17. import { filterEmpty } from '../_util/props-util';
  18. import { cloneElement } from '../_util/vnode';
  19. export default defineComponent({
  20. compatConfig: {
  21. MODE: 3
  22. },
  23. name: 'Steps',
  24. props: {
  25. type: PropTypes.string.def('default'),
  26. prefixCls: PropTypes.string.def('vc-steps'),
  27. iconPrefix: PropTypes.string.def('vc'),
  28. direction: PropTypes.string.def('horizontal'),
  29. labelPlacement: PropTypes.string.def('horizontal'),
  30. status: stringType('process'),
  31. size: PropTypes.string.def(''),
  32. progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(undefined),
  33. initial: PropTypes.number.def(0),
  34. current: PropTypes.number.def(0),
  35. items: PropTypes.array.def(() => []),
  36. icons: PropTypes.shape({
  37. finish: PropTypes.any,
  38. error: PropTypes.any
  39. }).loose,
  40. stepIcon: functionType(),
  41. isInline: PropTypes.looseBool,
  42. itemRender: functionType()
  43. },
  44. emits: ['change'],
  45. setup(props, _ref) {
  46. let {
  47. slots,
  48. emit
  49. } = _ref;
  50. const onStepClick = next => {
  51. const {
  52. current
  53. } = props;
  54. if (current !== next) {
  55. emit('change', next);
  56. }
  57. };
  58. const renderStep = (item, index, legacyRender) => {
  59. const {
  60. prefixCls,
  61. iconPrefix,
  62. status,
  63. current,
  64. initial,
  65. icons,
  66. stepIcon = slots.stepIcon,
  67. isInline,
  68. itemRender,
  69. progressDot = slots.progressDot
  70. } = props;
  71. const mergedProgressDot = isInline || progressDot;
  72. const mergedItem = _extends(_extends({}, item), {
  73. class: ''
  74. });
  75. const stepNumber = initial + index;
  76. const commonProps = {
  77. active: stepNumber === current,
  78. stepNumber: stepNumber + 1,
  79. stepIndex: stepNumber,
  80. key: stepNumber,
  81. prefixCls,
  82. iconPrefix,
  83. progressDot: mergedProgressDot,
  84. stepIcon,
  85. icons,
  86. onStepClick
  87. };
  88. // fix tail color
  89. if (status === 'error' && index === current - 1) {
  90. mergedItem.class = `${prefixCls}-next-error`;
  91. }
  92. if (!mergedItem.status) {
  93. if (stepNumber === current) {
  94. mergedItem.status = status;
  95. } else if (stepNumber < current) {
  96. mergedItem.status = 'finish';
  97. } else {
  98. mergedItem.status = 'wait';
  99. }
  100. }
  101. if (isInline) {
  102. mergedItem.icon = undefined;
  103. mergedItem.subTitle = undefined;
  104. }
  105. if (legacyRender) {
  106. return legacyRender(_extends(_extends({}, mergedItem), commonProps));
  107. }
  108. if (itemRender) {
  109. mergedItem.itemRender = stepItem => itemRender(mergedItem, stepItem);
  110. }
  111. return _createVNode(Step, _objectSpread(_objectSpread(_objectSpread({}, mergedItem), commonProps), {}, {
  112. "__legacy": false
  113. }), null);
  114. };
  115. const renderStepWithNode = (node, index) => {
  116. return renderStep(_extends({}, node.props), index, stepProps => {
  117. const stepNode = cloneElement(node, stepProps);
  118. return stepNode;
  119. });
  120. };
  121. return () => {
  122. var _a;
  123. const {
  124. prefixCls,
  125. direction,
  126. type,
  127. labelPlacement,
  128. iconPrefix,
  129. status,
  130. size,
  131. current,
  132. progressDot = slots.progressDot,
  133. initial,
  134. icons,
  135. items,
  136. isInline,
  137. itemRender
  138. } = props,
  139. restProps = __rest(props, ["prefixCls", "direction", "type", "labelPlacement", "iconPrefix", "status", "size", "current", "progressDot", "initial", "icons", "items", "isInline", "itemRender"]);
  140. const isNav = type === 'navigation';
  141. const mergedProgressDot = isInline || progressDot;
  142. const mergedDirection = isInline ? 'horizontal' : direction;
  143. const mergedSize = isInline ? undefined : size;
  144. const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
  145. const classString = classNames(prefixCls, `${prefixCls}-${direction}`, {
  146. [`${prefixCls}-${mergedSize}`]: mergedSize,
  147. [`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal',
  148. [`${prefixCls}-dot`]: !!mergedProgressDot,
  149. [`${prefixCls}-navigation`]: isNav,
  150. [`${prefixCls}-inline`]: isInline
  151. });
  152. return _createVNode("div", _objectSpread({
  153. "class": classString
  154. }, restProps), [items.filter(item => item).map((item, index) => renderStep(item, index)), filterEmpty((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)).map(renderStepWithNode)]);
  155. };
  156. }
  157. });