Skip to content

Commit 322243d

Browse files
zhengdaonianzhengdaonian
committed
feat: n-progress adds size prop
1 parent abea5be commit 322243d

File tree

11 files changed

+291
-19
lines changed

11 files changed

+291
-19
lines changed

‎CHANGELOG.en-US.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# CHANGELOG
22

3+
## 2.41.1
4+
5+
### Features
6+
7+
- `n-progress` add `size` props. closes [#6650](https://github.com/tusen-ai/naive-ui/issues/6650)
8+
39
## 2.41.0
410

511
`2025-01-05`

‎CHANGELOG.zh-CN.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# CHANGELOG
22

3+
## 2.41.1
4+
5+
### Features
6+
7+
- `n-progress` add `size` props. 关闭 [#6650](https://github.com/tusen-ai/naive-ui/issues/6650)
8+
39
## 2.41.0
410

511
`2025-01-05`

‎src/progress/demos/enUS/index.demo-entry.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ no-indicator.vue
1616
height.vue
1717
processing.vue
1818
gradient.vue
19+
size.vue
1920
```
2021

2122
## API
@@ -43,6 +44,7 @@ gradient.vue
4344
| stroke-width | `number` | `7` | Progress width. | |
4445
| type | `'line' \| 'circle' \| 'multiple-circle' \| 'dashboard'` | `line` | Progress type. | `'dashboard'` 2.25.2 |
4546
| unit | `string` | `%` | Progress unit. | |
47+
| size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Progress size. | |
4648

4749
### Progress Slots
4850

‎src/progress/demos/enUS/size.demo.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<markdown>
2+
# Size
3+
4+
Progress can be `tiny` `small`, `medium` and `large` in size.
5+
</markdown>
6+
7+
<script lang="ts" setup>
8+
import type { ProgressSize } from 'naive-ui'
9+
import { ref } from 'vue'
10+
11+
const size = ref<ProgressSize>('medium')
12+
13+
const percentage = ref(40)
14+
15+
function add() {
16+
percentage.value += 10
17+
if (percentage.value > 100) {
18+
percentage.value = 0
19+
}
20+
}
21+
22+
function minus() {
23+
percentage.value -= 10
24+
if (percentage.value < 0) {
25+
percentage.value = 100
26+
}
27+
}
28+
</script>
29+
30+
<template>
31+
<n-space vertical>
32+
<n-radio-group v-model:value="size">
33+
<n-space>
34+
<n-radio value="tiny">
35+
Small Small
36+
</n-radio>
37+
<n-radio value="small">
38+
Small
39+
</n-radio>
40+
<n-radio value="medium">
41+
Not Small
42+
</n-radio>
43+
<n-radio value="large">
44+
Not Not Small
45+
</n-radio>
46+
</n-space>
47+
</n-radio-group>
48+
49+
<n-progress type="line" :size="size" :percentage="percentage" />
50+
51+
<n-progress type="circle" :size="size" :percentage="percentage" />
52+
53+
<n-progress
54+
type="dashboard"
55+
:size="size"
56+
gap-position="bottom"
57+
:percentage="percentage"
58+
/>
59+
60+
<n-el>
61+
<n-progress
62+
type="multiple-circle"
63+
:size="size"
64+
:stroke-width="6"
65+
:circle-gap="0.5"
66+
:percentage="[
67+
percentage,
68+
(percentage + 10) % 100,
69+
(percentage + 20) % 100,
70+
(percentage + 30) % 100,
71+
]"
72+
:color="[
73+
'var(--info-color)',
74+
'var(--success-color)',
75+
'var(--warning-color)',
76+
'var(--error-color)',
77+
]"
78+
:rail-style="[
79+
{ stroke: 'var(--info-color)', opacity: 0.3 },
80+
{ stroke: 'var(--success-color)', opacity: 0.3 },
81+
{ stroke: 'var(--warning-color)', opacity: 0.3 },
82+
{ stroke: 'var(--error-color)', opacity: 0.3 },
83+
]"
84+
>
85+
<div style="text-align: center">
86+
圈圈赛跑！
87+
</div>
88+
</n-progress>
89+
</n-el>
90+
91+
<n-space>
92+
<n-button @click="minus">
93+
减 10%
94+
</n-button>
95+
<n-button @click="add">
96+
加 10%
97+
</n-button>
98+
</n-space>
99+
</n-space>
100+
</template>

‎src/progress/demos/zhCN/index.demo-entry.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ no-indicator.vue
1616
height.vue
1717
processing.vue
1818
gradient.vue
19+
size.vue
1920
```
2021

2122
## API
@@ -43,6 +44,7 @@ gradient.vue
4344
| stroke-width | `number` | `7` | 进度条宽度 | |
4445
| type | `'line' \| 'circle' \| 'multiple-circle' \| 'dashboard'` | `'line'` | 进度条类型 | `'dashboard'` 2.25.2 |
4546
| unit | `string` | `%` | 进度条单位 | |
47+
| size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 | |
4648

4749
### Progress Slots
4850

‎src/progress/demos/zhCN/size.demo.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<markdown>
2+
# 尺寸
3+
4+
有 `tiny` `small`、`medium` 和 `large` 尺寸。
5+
</markdown>
6+
7+
<script lang="ts" setup>
8+
import type { ProgressSize } from 'naive-ui'
9+
import { ref } from 'vue'
10+
11+
const size = ref<ProgressSize>('medium')
12+
13+
const percentage = ref(40)
14+
15+
function add() {
16+
percentage.value += 10
17+
if (percentage.value > 100) {
18+
percentage.value = 0
19+
}
20+
}
21+
22+
function minus() {
23+
percentage.value -= 10
24+
if (percentage.value < 0) {
25+
percentage.value = 100
26+
}
27+
}
28+
</script>
29+
30+
<template>
31+
<n-space vertical>
32+
<n-radio-group v-model:value="size">
33+
<n-space>
34+
<n-radio value="tiny">
35+
很小
36+
</n-radio>
37+
<n-radio value="small">
38+
小
39+
</n-radio>
40+
<n-radio value="medium">
41+
不小
42+
</n-radio>
43+
<n-radio value="large">
44+
不不小
45+
</n-radio>
46+
</n-space>
47+
</n-radio-group>
48+
49+
<n-progress type="line" :size="size" :percentage="percentage" />
50+
51+
<n-progress type="circle" :size="size" :percentage="percentage" />
52+
53+
<n-progress
54+
type="dashboard"
55+
:size="size"
56+
gap-position="bottom"
57+
:percentage="percentage"
58+
/>
59+
60+
<n-el>
61+
<n-progress
62+
type="multiple-circle"
63+
:size="size"
64+
:stroke-width="6"
65+
:circle-gap="0.5"
66+
:percentage="[
67+
percentage,
68+
(percentage + 10) % 100,
69+
(percentage + 20) % 100,
70+
(percentage + 30) % 100,
71+
]"
72+
:color="[
73+
'var(--info-color)',
74+
'var(--success-color)',
75+
'var(--warning-color)',
76+
'var(--error-color)',
77+
]"
78+
:rail-style="[
79+
{ stroke: 'var(--info-color)', opacity: 0.3 },
80+
{ stroke: 'var(--success-color)', opacity: 0.3 },
81+
{ stroke: 'var(--warning-color)', opacity: 0.3 },
82+
{ stroke: 'var(--error-color)', opacity: 0.3 },
83+
]"
84+
>
85+
<div style="text-align: center">
86+
圈圈赛跑！
87+
</div>
88+
</n-progress>
89+
</n-el>
90+
91+
<n-space>
92+
<n-button @click="minus">
93+
减 10%
94+
</n-button>
95+
<n-button @click="add">
96+
加 10%
97+
</n-button>
98+
</n-space>
99+
</n-space>
100+
</template>

‎src/progress/src/Progress.tsx

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import type { ThemeProps } from '../../_mixins'
22
import type { ProgressTheme } from '../styles'
3-
import type { ProgressGradient, ProgressStatus } from './public-types'
3+
import type {
4+
ProgressGradient,
5+
ProgressSize,
6+
ProgressStatus,
7+
ProgressType
8+
} from './public-types'
9+
import { useMergedState } from 'vooks'
410
import {
511
computed,
612
type CSSProperties,
713
defineComponent,
814
h,
9-
type PropType
15+
type PropType,
16+
ref,
17+
toRef
1018
} from 'vue'
1119
import { useConfig, useTheme, useThemeClass } from '../../_mixins'
1220
import { createKey, type ExtractPublicPropTypes } from '../../_utils'
@@ -20,9 +28,7 @@ export const progressProps = {
2028
...(useTheme.props as ThemeProps<ProgressTheme>),
2129
processing: Boolean,
2230
type: {
23-
type: String as PropType<
24-
'line' | 'circle' | 'multiple-circle' | 'dashboard'
25-
>,
31+
type: String as PropType<ProgressType>,
2632
default: 'line'
2733
},
2834
gapDegree: Number,
@@ -68,6 +74,10 @@ export const progressProps = {
6874
type: Number,
6975
default: 1
7076
},
77+
size: {
78+
type: String as PropType<ProgressSize>,
79+
default: 'medium'
80+
},
7181
height: Number,
7282
borderRadius: [String, Number] as PropType<string | number>,
7383
fillBorderRadius: [String, Number] as PropType<string | number>,
@@ -80,6 +90,10 @@ export default defineComponent({
8090
name: 'Progress',
8191
props: progressProps,
8292
setup(props) {
93+
const uncontrolledSizeRef = ref(props.size)
94+
const controlledSizeRef = toRef(props, 'size')
95+
const mergedSizeRef = useMergedState(controlledSizeRef, uncontrolledSizeRef)
96+
8397
const mergedIndicatorPlacementRef = computed(() => {
8498
return props.indicatorPlacement || props.indicatorPosition
8599
})
@@ -101,26 +115,33 @@ export default defineComponent({
101115
props,
102116
mergedClsPrefixRef
103117
)
118+
104119
const cssVarsRef = computed(() => {
105120
const { status } = props
106121
const {
107122
common: { cubicBezierEaseInOut },
108123
self: {
109-
fontSize,
110-
fontSizeCircle,
111124
railColor,
112-
railHeight,
113125
iconSizeCircle,
114126
iconSizeLine,
115127
textColorCircle,
116128
textColorLineInner,
117129
textColorLineOuter,
118130
lineBgProcessing,
119131
fontWeightCircle,
132+
[createKey('railHeight', mergedSizeRef.value)]: railHeight,
133+
[createKey('circleWidth', mergedSizeRef.value)]: circleWidth,
134+
[createKey('multipleCircleWidth', mergedSizeRef.value)]:
135+
multipleCircleWidth,
136+
[createKey('multipleCircleFontSize', mergedSizeRef.value)]:
137+
multipleCircleFontSize,
138+
[createKey('fontSizeCircle', mergedSizeRef.value)]: fontSizeCircle,
139+
[createKey('fontSize', mergedSizeRef.value)]: fontSize,
120140
[createKey('iconColor', status)]: iconColor,
121141
[createKey('fillColor', status)]: fillColor
122142
}
123143
} = themeRef.value
144+
124145
return {
125146
'--n-bezier': cubicBezierEaseInOut,
126147
'--n-fill-color': fillColor,
@@ -133,9 +154,12 @@ export default defineComponent({
133154
'--n-line-bg-processing': lineBgProcessing,
134155
'--n-rail-color': railColor,
135156
'--n-rail-height': railHeight,
157+
'--n-multiple-circle-width': multipleCircleWidth,
158+
'--n-multiple-circle-font-size': multipleCircleFontSize,
136159
'--n-text-color-circle': textColorCircle,
137160
'--n-text-color-line-inner': textColorLineInner,
138-
'--n-text-color-line-outer': textColorLineOuter
161+
'--n-text-color-line-outer': textColorLineOuter,
162+
'--n-circle-width': circleWidth
139163
}
140164
})
141165
const themeClassHandle = inlineThemeDisabled
@@ -152,6 +176,7 @@ export default defineComponent({
152176
gapDeg,
153177
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
154178
themeClass: themeClassHandle?.themeClass,
179+
mergedSize: mergedSizeRef,
155180
onRender: themeClassHandle?.onRender
156181
}
157182
},
@@ -181,6 +206,7 @@ export default defineComponent({
181206
gapOffsetDegree,
182207
themeClass,
183208
$slots,
209+
mergedSize,
184210
onRender
185211
} = this
186212
onRender?.()
@@ -206,6 +232,7 @@ export default defineComponent({
206232
<Circle
207233
clsPrefix={mergedClsPrefix}
208234
status={status}
235+
size={mergedSize}
209236
showIndicator={showIndicator}
210237
indicatorTextColor={indicatorTextColor}
211238
railColor={railColor as any}

‎src/progress/src/public-types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ export type ProgressStatus =
77
export interface ProgressGradient {
88
stops: string[]
99
}
10+
11+
export type ProgressSize = 'tiny' | 'small' | 'medium' | 'large'
12+
13+
export type ProgressType = 'line' | 'circle' | 'multiple-circle' | 'dashboard'

0 commit comments

Comments
 (0)