Steps.js 2.0 KB

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