Skip to content

Commit c8bcbfd

Browse files
RSS1102tdesign-botuyarnliweijie0812
authored
refactor(Statistic): change color attribute type to string and update docs description (#5843)
* fix(Statistic): `color` field type validation * refactor(Statistic): change color attribute type to `string` and update docs description * test(Statistic): update color tests to validate CSS color values and handle empty string * fix(Statistic): remove COLOR_MAP usage for color prop in contentStyle * chore(Statistic): remove unused import of props in tests * chore: stash changelog [ci skip] * fix(Statistic): 更新颜色属性描述以明确支持的颜色和模式 * chore(Statistic): 更新颜色属性描述以明确支持的颜色和模式 * feat(Statistic): 支持所有 TDesign 预设颜色并更新颜色属性处理逻辑 * test(Statistic): 更新颜色测试用例以支持 TDesign 预设颜色 * test(Statistic): 优化颜色属性测试用例以动态验证 COLOR_MAP 中的颜色 * Update packages/components/statistic/statistic.md Co-authored-by: liweijie0812 <[email protected]> --------- Co-authored-by: tdesign-bot <[email protected]> Co-authored-by: wū yāng <[email protected]> Co-authored-by: liweijie0812 <[email protected]>
1 parent 9b274f4 commit c8bcbfd

File tree

7 files changed

+63
-15
lines changed

7 files changed

+63
-15
lines changed

‎packages/components/statistic/__tests__/statistic.test.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { mount } from '@vue/test-utils';
22
import Statistic from '@tdesign/components/statistic';
3+
import { COLOR_MAP } from '@tdesign/common-js/statistic/utils';
34

45
describe('Statistic', () => {
56
describe(':props', () => {
@@ -110,5 +111,51 @@ describe('Statistic', () => {
110111
expect(trendIconElement.exists()).toBe(true);
111112
expect(trendIconElement.element.tagName).toBe('svg');
112113
});
114+
115+
it('color:#ff0000', () => {
116+
const wrapper = mount(Statistic, {
117+
propsData: {
118+
title: 'Total Sales',
119+
value: 1000,
120+
color: '#ff0000',
121+
},
122+
});
123+
124+
const contentElement = wrapper.find('.t-statistic-content');
125+
expect(contentElement.exists()).toBe(true);
126+
expect(contentElement.attributes('style')).toContain('color: rgb(255, 0, 0)');
127+
});
128+
129+
it('color:yellow', () => {
130+
const wrapper = mount(Statistic, {
131+
propsData: {
132+
title: 'Total Sales',
133+
value: 1000,
134+
color: 'yellow',
135+
},
136+
});
137+
138+
const contentElement = wrapper.find('.t-statistic-content');
139+
expect(contentElement.exists()).toBe(true);
140+
expect(contentElement.attributes('style')).toContain('color: yellow');
141+
});
142+
143+
it('colors: colorKeys', async () => {
144+
Object.keys(COLOR_MAP).map((color) => {
145+
const wrapper = mount(Statistic, {
146+
props: {
147+
title: 'Total Sales',
148+
value: 1000,
149+
color,
150+
},
151+
});
152+
153+
const contentElement = wrapper.find('.t-statistic-content');
154+
const vm = wrapper.vm as any;
155+
expect(contentElement.exists()).toBe(true);
156+
const expectedColor = COLOR_MAP[color as keyof typeof COLOR_MAP];
157+
expect(vm.contentStyle).toEqual({ color: expectedColor });
158+
});
159+
});
113160
});
114161
});

‎packages/components/statistic/props.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,10 @@ export default {
1414
},
1515
/** 是否开始动画 */
1616
animationStart: Boolean,
17-
/** 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值 */
17+
/** 颜色风格可以为支持 TDesign 的浅色和深色模式的黑色（black）、蓝色（blue）、红色（red）、橙色（orange）、绿色（green）。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持颜色值，但不支持 TDesign 的浅色和深色模式。 */
1818
color: {
19-
type: String as PropType<TdStatisticProps['color']>,
20-
validator(val: TdStatisticProps['color']): boolean {
21-
if (!val) return true;
22-
return ['black', 'blue', 'red', 'orange', 'green'].includes(val);
23-
},
19+
type: String,
20+
default: '',
2421
},
2522
/** 小数保留位数 */
2623
decimalPlaces: {

‎packages/components/statistic/statistic.en-US.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### Statistic Props
65

76
name | type | default | description | required
87
-- | -- | -- | -- | --
98
animation | Object | - | Animation effect control, `duration` refers to the transition time of the animation `unit: millisecond`, `valueFrom` refers to the initial value of the animation. `{ duration, valueFrom }`。Typescript：`animation` `interface animation { duration: number; valueFrom: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/statistic/type.ts) | N
109
animationStart | Boolean | false | Whether to start animation | N
11-
color | String | - | Color style, followed by TDesign style black, blue, red, orange, green.Can also be any RGB equivalent supported by [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)。options: black/blue/red/orange/green | N
10+
color | String | - | The color style can support TDesign's light and dark modes with the following options: black, blue, red, orange, and green. Alternatively, it can be any [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) value, but in this case, TDesign's light and dark modes will not be supported. | N
1211
decimalPlaces | Number | - | Decimal places | N
1312
extra | String / Slot / Function | - | Additional display content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
1413
format | Function | - | Format numeric display value。Typescript：`(value: number) => number` | N

‎packages/components/statistic/statistic.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
:: BASE_DOC ::
22

33
## API
4-
54
### Statistic Props
65

76
名称 | 类型 | 默认值 | 描述 | 必传
87
-- | -- | -- | -- | --
98
animation | Object | - | 动画效果控制，`duration` 指动画的过渡时间`单位：毫秒`，`valueFrom` 指动画的起始数值。`{ duration, valueFrom }`。TS 类型：`animation` `interface animation { duration: number; valueFrom: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/statistic/type.ts) | N
109
animationStart | Boolean | false | 是否开始动画 | N
11-
color | String | - | 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值。可选项：black/blue/red/orange/green | N
10+
color | String | - | 颜色风格，预设五个 TDesign 颜色风格：黑色（black）、蓝色（blue）、红色（red）、橙色（orange）、绿色（green）支持深浅色模式切换。也可以自定义任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持颜色值，深浅色模式切换需自行适配。 | N
1211
decimalPlaces | Number | - | 小数保留位数 | N
1312
extra | String / Slot / Function | - | 额外的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
1413
format | Function | - | 格式化数值显示值。TS 类型：`(value: number) => number` | N

‎packages/components/statistic/statistic.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,8 @@ export default defineComponent({
6565
});
6666

6767
const contentStyle = computed(() => {
68-
const { color } = props;
6968
return {
70-
color: COLOR_MAP[color] || color,
69+
color: COLOR_MAP[props.color as keyof typeof COLOR_MAP] || props.color,
7170
};
7271
});
7372

@@ -92,7 +91,7 @@ export default defineComponent({
9291

9392
onMounted(() => props.animation && props.animationStart && start());
9493

95-
expose({ start });
94+
expose({ start, contentStyle });
9695

9796
return () => {
9897
const trendIcon = props.trend ? trendIcons[props.trend] : null;

‎packages/components/statistic/type.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,10 @@ export interface TdStatisticProps {
1717
*/
1818
animationStart?: boolean;
1919
/**
20-
* 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值
20+
* 颜色风格可以为支持 TDesign 的浅色和深色模式的黑色（black）、蓝色（blue）、红色（red）、橙色（orange）、绿色（green）。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持颜色值，但不支持 TDesign 的浅色和深色模式。
21+
* @default ''
2122
*/
22-
color?: 'black' | 'blue' | 'red' | 'orange' | 'green';
23+
color?: string;
2324
/**
2425
* 小数保留位数
2526
*/

‎packages/tdesign-vue-next/.changelog/pr-5843.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
pr_number: 5843
3+
contributor: RSS1102
4+
---
5+
6+
- refactor(Statistic): 修改 `color` 属性类型为字符串，以支持任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的颜色值 @RSS1102 ([#5843](https://github.com/Tencent/tdesign-vue-next/pull/5843))

0 commit comments

Comments
 (0)