Steps.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  4. var _excluded = ["prefixCls"];
  5. import { createVNode as _createVNode } from "vue";
  6. import PropTypes from '../_util/vue-types';
  7. import { filterEmpty } from '../_util/props-util';
  8. import { cloneElement } from '../_util/vnode';
  9. import { defineComponent } from 'vue';
  10. import classNames from '../_util/classNames';
  11. export default defineComponent({
  12. compatConfig: {
  13. MODE: 3
  14. },
  15. name: 'Steps',
  16. props: {
  17. type: PropTypes.string.def('default'),
  18. prefixCls: PropTypes.string.def('vc-steps'),
  19. iconPrefix: PropTypes.string.def('vc'),
  20. direction: PropTypes.string.def('horizontal'),
  21. labelPlacement: PropTypes.string.def('horizontal'),
  22. status: PropTypes.string.def('process'),
  23. size: PropTypes.string.def(''),
  24. progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(undefined),
  25. initial: PropTypes.number.def(0),
  26. current: PropTypes.number.def(0),
  27. icons: PropTypes.shape({
  28. finish: PropTypes.any,
  29. error: PropTypes.any
  30. }).loose,
  31. stepIcon: Function
  32. },
  33. slots: ['stepIcon', 'progressDot'],
  34. emits: ['change'],
  35. setup: function setup(props, _ref) {
  36. var slots = _ref.slots,
  37. emit = _ref.emit;
  38. var onStepClick = function onStepClick(next) {
  39. var current = props.current;
  40. if (current !== next) {
  41. emit('change', next);
  42. }
  43. };
  44. return function () {
  45. var _classNames, _slots$default;
  46. var prefixCls = props.prefixCls,
  47. direction = props.direction,
  48. type = props.type,
  49. labelPlacement = props.labelPlacement,
  50. iconPrefix = props.iconPrefix,
  51. status = props.status,
  52. size = props.size,
  53. current = props.current,
  54. _props$progressDot = props.progressDot,
  55. progressDot = _props$progressDot === void 0 ? slots.progressDot : _props$progressDot,
  56. initial = props.initial,
  57. icons = props.icons,
  58. _props$stepIcon = props.stepIcon,
  59. stepIcon = _props$stepIcon === void 0 ? slots.stepIcon : _props$stepIcon;
  60. var isNav = type === 'navigation';
  61. var adjustedLabelPlacement = progressDot ? 'vertical' : labelPlacement;
  62. var classString = classNames(prefixCls, "".concat(prefixCls, "-").concat(direction), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_classNames, "".concat(prefixCls, "-label-").concat(adjustedLabelPlacement), direction === 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-dot"), !!progressDot), _defineProperty(_classNames, "".concat(prefixCls, "-navigation"), isNav), _classNames));
  63. var children = filterEmpty((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  64. return _createVNode("div", {
  65. "class": classString
  66. }, [children.map(function (child, index) {
  67. // description: PropTypes.any,
  68. // icon: PropTypes.any,
  69. // status: PropTypes.oneOf(tuple('wait', 'process', 'finish', 'error')),
  70. // disabled: { type: Boolean, default: undefined },
  71. // title: PropTypes.any,
  72. // subTitle: PropTypes.any,
  73. var _ref2 = child.props || {},
  74. _ref2$prefixCls = _ref2.prefixCls,
  75. pre = _ref2$prefixCls === void 0 ? prefixCls : _ref2$prefixCls,
  76. restProps = _objectWithoutProperties(_ref2, _excluded);
  77. var stepNumber = initial + index;
  78. var stepProps = _objectSpread(_objectSpread({}, restProps), {}, {
  79. stepNumber: stepNumber + 1,
  80. stepIndex: stepNumber,
  81. key: stepNumber,
  82. prefixCls: pre,
  83. iconPrefix: iconPrefix,
  84. progressDot: progressDot,
  85. icons: icons,
  86. stepIcon: stepIcon,
  87. onStepClick: onStepClick
  88. });
  89. // fix tail color
  90. if (status === 'error' && index === current - 1) {
  91. stepProps.class = "".concat(prefixCls, "-next-error");
  92. }
  93. if (!restProps.status) {
  94. if (stepNumber === current) {
  95. stepProps.status = status;
  96. } else if (stepNumber < current) {
  97. stepProps.status = 'finish';
  98. } else {
  99. stepProps.status = 'wait';
  100. }
  101. }
  102. stepProps.active = stepNumber === current;
  103. return cloneElement(child, stepProps);
  104. })]);
  105. };
  106. }
  107. });