Line.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  11. var _useRefs3 = _interopRequireDefault(require("../../_util/hooks/useRefs"));
  12. var _initDefaultProps = _interopRequireDefault(require("../../_util/props-util/initDefaultProps"));
  13. var _common = require("./common");
  14. var _types = require("./types");
  15. var _excluded = ["percent", "prefixCls", "strokeColor", "strokeLinecap", "strokeWidth", "trailColor", "trailWidth", "transition"];
  16. var _default = (0, _vue.defineComponent)({
  17. compatConfig: {
  18. MODE: 3
  19. },
  20. name: 'Line',
  21. props: (0, _initDefaultProps.default)(_types.propTypes, _common.defaultProps),
  22. setup: function setup(props) {
  23. var percentList = (0, _vue.computed)(function () {
  24. var percent = props.percent;
  25. return Array.isArray(percent) ? percent : [percent];
  26. });
  27. var percentListProps = (0, _vue.computed)(function () {
  28. var prefixCls = props.prefixCls,
  29. strokeLinecap = props.strokeLinecap,
  30. strokeWidth = props.strokeWidth,
  31. transition = props.transition;
  32. var stackPtg = 0;
  33. return percentList.value.map(function (ptg, index) {
  34. var dashPercent = 1;
  35. switch (strokeLinecap) {
  36. case 'round':
  37. dashPercent = 1 - strokeWidth / 100;
  38. break;
  39. case 'square':
  40. dashPercent = 1 - strokeWidth / 2 / 100;
  41. break;
  42. default:
  43. dashPercent = 1;
  44. break;
  45. }
  46. var pathStyle = {
  47. strokeDasharray: "".concat(ptg * dashPercent, "px, 100px"),
  48. strokeDashoffset: "-".concat(stackPtg, "px"),
  49. transition: transition || 'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear'
  50. };
  51. var color = strokeColorList.value[index] || strokeColorList.value[strokeColorList.value.length - 1];
  52. stackPtg += ptg;
  53. var pathProps = {
  54. key: index,
  55. d: pathString.value,
  56. 'stroke-linecap': strokeLinecap,
  57. stroke: color,
  58. 'stroke-width': strokeWidth,
  59. 'fill-opacity': '0',
  60. class: "".concat(prefixCls, "-line-path"),
  61. style: pathStyle
  62. };
  63. return pathProps;
  64. });
  65. });
  66. var strokeColorList = (0, _vue.computed)(function () {
  67. var strokeColor = props.strokeColor;
  68. return Array.isArray(strokeColor) ? strokeColor : [strokeColor];
  69. });
  70. var _useRefs = (0, _useRefs3.default)(),
  71. _useRefs2 = (0, _slicedToArray2.default)(_useRefs, 2),
  72. setRef = _useRefs2[0],
  73. paths = _useRefs2[1];
  74. (0, _common.useTransitionDuration)(paths);
  75. var center = (0, _vue.computed)(function () {
  76. return props.strokeWidth / 2;
  77. });
  78. var right = (0, _vue.computed)(function () {
  79. return 100 - props.strokeWidth / 2;
  80. });
  81. var pathString = (0, _vue.computed)(function () {
  82. return "M ".concat(props.strokeLinecap === 'round' ? center.value : 0, ",").concat(center.value, "\n L ").concat(props.strokeLinecap === 'round' ? right.value : 100, ",").concat(center.value);
  83. });
  84. var viewBoxString = (0, _vue.computed)(function () {
  85. return "0 0 100 ".concat(props.strokeWidth);
  86. });
  87. var pathFirst = (0, _vue.computed)(function () {
  88. return {
  89. d: pathString.value,
  90. 'stroke-linecap': props.strokeLinecap,
  91. stroke: props.trailColor,
  92. 'stroke-width': props.trailWidth || props.strokeWidth,
  93. 'fill-opacity': '0',
  94. class: "".concat(props.prefixCls, "-line-trail")
  95. };
  96. });
  97. return function () {
  98. var percent = props.percent,
  99. prefixCls = props.prefixCls,
  100. strokeColor = props.strokeColor,
  101. strokeLinecap = props.strokeLinecap,
  102. strokeWidth = props.strokeWidth,
  103. trailColor = props.trailColor,
  104. trailWidth = props.trailWidth,
  105. transition = props.transition,
  106. restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  107. delete restProps.gapPosition;
  108. return (0, _vue.createVNode)("svg", (0, _objectSpread2.default)({
  109. "class": "".concat(prefixCls, "-line"),
  110. "viewBox": viewBoxString.value,
  111. "preserveAspectRatio": "none"
  112. }, restProps), [(0, _vue.createVNode)("path", pathFirst.value, null), percentListProps.value.map(function (pathProps, index) {
  113. return (0, _vue.createVNode)("path", (0, _objectSpread2.default)({
  114. "ref": setRef(index)
  115. }, pathProps), null);
  116. })]);
  117. };
  118. }
  119. });
  120. exports.default = _default;