Circle.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.circleProps = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _vcProgress = require("../vc-progress");
  11. var _utils = require("./utils");
  12. var _props = require("./props");
  13. var _propsUtil = require("../_util/props-util");
  14. var _tooltip = _interopRequireDefault(require("../tooltip"));
  15. var _type = require("../_util/type");
  16. const circleProps = () => (0, _extends2.default)((0, _extends2.default)({}, (0, _props.progressProps)()), {
  17. strokeColor: (0, _type.anyType)()
  18. });
  19. exports.circleProps = circleProps;
  20. const CIRCLE_MIN_STROKE_WIDTH = 3;
  21. const getMinPercent = width => CIRCLE_MIN_STROKE_WIDTH / width * 100;
  22. var _default = exports.default = (0, _vue.defineComponent)({
  23. compatConfig: {
  24. MODE: 3
  25. },
  26. name: 'ProgressCircle',
  27. inheritAttrs: false,
  28. props: (0, _propsUtil.initDefaultProps)(circleProps(), {
  29. trailColor: null
  30. }),
  31. setup(props, _ref) {
  32. let {
  33. slots,
  34. attrs
  35. } = _ref;
  36. const originWidth = (0, _vue.computed)(() => {
  37. var _a;
  38. return (_a = props.width) !== null && _a !== void 0 ? _a : 120;
  39. });
  40. const mergedSize = (0, _vue.computed)(() => {
  41. var _a;
  42. return (_a = props.size) !== null && _a !== void 0 ? _a : [originWidth.value, originWidth.value];
  43. });
  44. const sizeRef = (0, _vue.computed)(() => (0, _utils.getSize)(mergedSize.value, 'circle'));
  45. const gapDeg = (0, _vue.computed)(() => {
  46. // Support gapDeg = 0 when type = 'dashboard'
  47. if (props.gapDegree || props.gapDegree === 0) {
  48. return props.gapDegree;
  49. }
  50. if (props.type === 'dashboard') {
  51. return 75;
  52. }
  53. return undefined;
  54. });
  55. const circleStyle = (0, _vue.computed)(() => {
  56. return {
  57. width: `${sizeRef.value.width}px`,
  58. height: `${sizeRef.value.height}px`,
  59. fontSize: `${sizeRef.value.width * 0.15 + 6}px`
  60. };
  61. });
  62. const circleWidth = (0, _vue.computed)(() => {
  63. var _a;
  64. return (_a = props.strokeWidth) !== null && _a !== void 0 ? _a : Math.max(getMinPercent(sizeRef.value.width), 6);
  65. });
  66. const gapPos = (0, _vue.computed)(() => props.gapPosition || props.type === 'dashboard' && 'bottom' || undefined);
  67. // using className to style stroke color
  68. const percent = (0, _vue.computed)(() => (0, _utils.getPercentage)(props));
  69. const isGradient = (0, _vue.computed)(() => Object.prototype.toString.call(props.strokeColor) === '[object Object]');
  70. const strokeColor = (0, _vue.computed)(() => (0, _utils.getStrokeColor)({
  71. success: props.success,
  72. strokeColor: props.strokeColor
  73. }));
  74. const wrapperClassName = (0, _vue.computed)(() => ({
  75. [`${props.prefixCls}-inner`]: true,
  76. [`${props.prefixCls}-circle-gradient`]: isGradient.value
  77. }));
  78. return () => {
  79. var _a;
  80. const circleContent = (0, _vue.createVNode)(_vcProgress.Circle, {
  81. "percent": percent.value,
  82. "strokeWidth": circleWidth.value,
  83. "trailWidth": circleWidth.value,
  84. "strokeColor": strokeColor.value,
  85. "strokeLinecap": props.strokeLinecap,
  86. "trailColor": props.trailColor,
  87. "prefixCls": props.prefixCls,
  88. "gapDegree": gapDeg.value,
  89. "gapPosition": gapPos.value
  90. }, null);
  91. return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
  92. "class": [wrapperClassName.value, attrs.class],
  93. "style": [attrs.style, circleStyle.value]
  94. }), [sizeRef.value.width <= 20 ? (0, _vue.createVNode)(_tooltip.default, null, {
  95. default: () => [(0, _vue.createVNode)("span", null, [circleContent])],
  96. title: slots.default
  97. }) : (0, _vue.createVNode)(_vue.Fragment, null, [circleContent, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])]);
  98. };
  99. }
  100. });