Circle.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import { createVNode as _createVNode } from "vue";
  3. import { computed, defineComponent } from 'vue';
  4. import { presetPrimaryColors } from '@ant-design/colors';
  5. import { Circle as VCCircle } from '../vc-progress';
  6. import { getSuccessPercent, validProgress } from './utils';
  7. import { progressProps } from './props';
  8. function getPercentage(_ref) {
  9. var percent = _ref.percent,
  10. success = _ref.success,
  11. successPercent = _ref.successPercent;
  12. var realSuccessPercent = validProgress(getSuccessPercent({
  13. success: success,
  14. successPercent: successPercent
  15. }));
  16. return [realSuccessPercent, validProgress(validProgress(percent) - realSuccessPercent)];
  17. }
  18. function getStrokeColor(_ref2) {
  19. var _ref2$success = _ref2.success,
  20. success = _ref2$success === void 0 ? {} : _ref2$success,
  21. strokeColor = _ref2.strokeColor;
  22. var successColor = success.strokeColor;
  23. return [successColor || presetPrimaryColors.green, strokeColor || null];
  24. }
  25. export default defineComponent({
  26. compatConfig: {
  27. MODE: 3
  28. },
  29. name: 'Circle',
  30. inheritAttrs: false,
  31. props: progressProps(),
  32. setup: function setup(props, _ref3) {
  33. var slots = _ref3.slots;
  34. var gapDeg = computed(function () {
  35. // Support gapDeg = 0 when type = 'dashboard'
  36. if (props.gapDegree || props.gapDegree === 0) {
  37. return props.gapDegree;
  38. }
  39. if (props.type === 'dashboard') {
  40. return 75;
  41. }
  42. return undefined;
  43. });
  44. var circleStyle = computed(function () {
  45. var circleSize = props.width || 120;
  46. return {
  47. width: typeof circleSize === 'number' ? "".concat(circleSize, "px") : circleSize,
  48. height: typeof circleSize === 'number' ? "".concat(circleSize, "px") : circleSize,
  49. fontSize: "".concat(circleSize * 0.15 + 6, "px")
  50. };
  51. });
  52. var circleWidth = computed(function () {
  53. return props.strokeWidth || 6;
  54. });
  55. var gapPos = computed(function () {
  56. return props.gapPosition || props.type === 'dashboard' && 'bottom' || 'top';
  57. });
  58. // using className to style stroke color
  59. var percent = computed(function () {
  60. return getPercentage(props);
  61. });
  62. var isGradient = computed(function () {
  63. return Object.prototype.toString.call(props.strokeColor) === '[object Object]';
  64. });
  65. var strokeColor = computed(function () {
  66. return getStrokeColor({
  67. success: props.success,
  68. strokeColor: props.strokeColor
  69. });
  70. });
  71. var wrapperClassName = computed(function () {
  72. var _ref4;
  73. return _ref4 = {}, _defineProperty(_ref4, "".concat(props.prefixCls, "-inner"), true), _defineProperty(_ref4, "".concat(props.prefixCls, "-circle-gradient"), isGradient.value), _ref4;
  74. });
  75. return function () {
  76. var _slots$default;
  77. return _createVNode("div", {
  78. "class": wrapperClassName.value,
  79. "style": circleStyle.value
  80. }, [_createVNode(VCCircle, {
  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), (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
  91. };
  92. }
  93. });