Circle.js 3.6 KB

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