forked from vueComponent/ant-design-vue
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCircle.tsx
105 lines (95 loc) · 3.32 KB
/
Circle.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import type { CSSProperties } from 'vue';
import { computed, defineComponent } from 'vue';
import { Circle as VCCircle } from '../vc-progress';
import { getPercentage, getSize, getStrokeColor } from './utils';
import type { ProgressProps, ProgressGradient } from './props';
import { progressProps } from './props';
import { initDefaultProps } from '../_util/props-util';
import Tooltip from '../tooltip';
import { anyType } from '../_util/type';
export interface CircleProps extends ProgressProps {
strokeColor?: string | ProgressGradient;
}
export const circleProps = () => ({
...progressProps(),
strokeColor: anyType<string | ProgressGradient>(),
});
const CIRCLE_MIN_STROKE_WIDTH = 3;
const getMinPercent = (width: number): number => (CIRCLE_MIN_STROKE_WIDTH / width) * 100;
export default defineComponent({
compatConfig: { MODE: 3 },
name: 'Circle',
inheritAttrs: false,
props: initDefaultProps(circleProps(), {
trailColor: null as unknown as string,
}),
setup(props, { slots }) {
const originWidth = computed(() => props.width || 120);
const mergedSize = computed(() => props.size ?? [originWidth.value, originWidth.value]);
const sizeRef = computed(() => getSize(mergedSize.value as ProgressProps['size'], 'circle'));
const gapDeg = computed(() => {
// Support gapDeg = 0 when type = 'dashboard'
if (props.gapDegree || props.gapDegree === 0) {
return props.gapDegree;
}
if (props.type === 'dashboard') {
return 75;
}
return undefined;
});
const circleStyle = computed<CSSProperties>(() => {
return {
width: `${sizeRef.value.width}px`,
height: `${sizeRef.value.height}px`,
fontSize: `${sizeRef.value.width * 0.15 + 6}px`,
};
});
const circleWidth = computed(
() => props.strokeWidth ?? Math.max(getMinPercent(sizeRef.value.width), 6),
);
const gapPos = computed(
() => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined,
);
// using className to style stroke color
const percent = computed(() => getPercentage(props));
const isGradient = computed(
() => Object.prototype.toString.call(props.strokeColor) === '[object Object]',
);
const strokeColor = computed(() =>
getStrokeColor({ success: props.success, strokeColor: props.strokeColor }),
);
const wrapperClassName = computed(() => ({
[`${props.prefixCls}-inner`]: true,
[`${props.prefixCls}-circle-gradient`]: isGradient.value,
}));
return () => {
const circleContent = (
<VCCircle
percent={percent.value}
strokeWidth={circleWidth.value}
trailWidth={circleWidth.value}
strokeColor={strokeColor.value}
strokeLinecap={props.strokeLinecap}
trailColor={props.trailColor}
prefixCls={props.prefixCls}
gapDegree={gapDeg.value}
gapPosition={gapPos.value}
/>
);
return (
<div class={wrapperClassName.value} style={circleStyle.value}>
{sizeRef.value.width <= 20 ? (
<Tooltip v-slots={{ title: slots.default }}>
<span>{circleContent}</span>
</Tooltip>
) : (
<>
{circleContent}
{slots.default?.()}
</>
)}
</div>
);
};
},
});