Steps.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.stepsProps = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _type = require("../_util/type");
  10. var _props = require("./props");
  11. var _utils = require("./utils");
  12. const stepsProps = () => (0, _extends2.default)((0, _extends2.default)({}, (0, _props.progressProps)()), {
  13. steps: Number,
  14. strokeColor: (0, _type.someType)(),
  15. trailColor: String
  16. });
  17. exports.stepsProps = stepsProps;
  18. var _default = exports.default = (0, _vue.defineComponent)({
  19. compatConfig: {
  20. MODE: 3
  21. },
  22. name: 'Steps',
  23. props: stepsProps(),
  24. setup(props, _ref) {
  25. let {
  26. slots
  27. } = _ref;
  28. const current = (0, _vue.computed)(() => Math.round(props.steps * ((props.percent || 0) / 100)));
  29. const mergedSize = (0, _vue.computed)(() => {
  30. var _a;
  31. return (_a = props.size) !== null && _a !== void 0 ? _a : [props.size === 'small' ? 2 : 14, props.strokeWidth || 8];
  32. });
  33. const sizeRef = (0, _vue.computed)(() => (0, _utils.getSize)(mergedSize.value, 'step', {
  34. steps: props.steps,
  35. strokeWidth: props.strokeWidth || 8
  36. }));
  37. const styledSteps = (0, _vue.computed)(() => {
  38. const {
  39. steps,
  40. strokeColor,
  41. trailColor,
  42. prefixCls
  43. } = props;
  44. const temp = [];
  45. for (let i = 0; i < steps; i += 1) {
  46. const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
  47. const cls = {
  48. [`${prefixCls}-steps-item`]: true,
  49. [`${prefixCls}-steps-item-active`]: i <= current.value - 1
  50. };
  51. temp.push((0, _vue.createVNode)("div", {
  52. "key": i,
  53. "class": cls,
  54. "style": {
  55. backgroundColor: i <= current.value - 1 ? color : trailColor,
  56. width: `${sizeRef.value.width / steps}px`,
  57. height: `${sizeRef.value.height}px`
  58. }
  59. }, null));
  60. }
  61. return temp;
  62. });
  63. return () => {
  64. var _a;
  65. return (0, _vue.createVNode)("div", {
  66. "class": `${props.prefixCls}-steps-outer`
  67. }, [styledSteps.value, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]);
  68. };
  69. }
  70. });