mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 12:48:04 +08:00
refactor(components): [steps] validate values and export values (#7947)
This commit is contained in:
parent
7e0f6d71a5
commit
72bc196adf
@ -8,3 +8,6 @@ export const ElSteps = withInstall(Steps, {
|
|||||||
})
|
})
|
||||||
export default ElSteps
|
export default ElSteps
|
||||||
export const ElStep = withNoopInstall(Step)
|
export const ElStep = withNoopInstall(Step)
|
||||||
|
|
||||||
|
export * from './src/item'
|
||||||
|
export * from './src/steps'
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { buildProps, iconPropType } from '@element-plus/utils'
|
import { buildProps, iconPropType } from '@element-plus/utils'
|
||||||
|
import type Step from './item.vue'
|
||||||
import type { ExtractPropTypes } from 'vue'
|
import type { ExtractPropTypes } from 'vue'
|
||||||
|
|
||||||
export const stepProps = buildProps({
|
export const stepProps = buildProps({
|
||||||
@ -16,8 +16,11 @@ export const stepProps = buildProps({
|
|||||||
},
|
},
|
||||||
status: {
|
status: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
|
||||||
values: ['', 'wait', 'process', 'finish', 'error', 'success'] as const,
|
values: ['', 'wait', 'process', 'finish', 'error', 'success'] as const,
|
||||||
|
default: '',
|
||||||
},
|
},
|
||||||
} as const)
|
} as const)
|
||||||
|
|
||||||
export type StepProps = ExtractPropTypes<typeof stepProps>
|
export type StepProps = ExtractPropTypes<typeof stepProps>
|
||||||
|
|
||||||
|
export type StepInstance = InstanceType<typeof Step>
|
||||||
|
@ -166,11 +166,11 @@ const style = computed(() => {
|
|||||||
return style
|
return style
|
||||||
})
|
})
|
||||||
|
|
||||||
const setIndex = (val) => {
|
const setIndex = (val: number) => {
|
||||||
index.value = val
|
index.value = val
|
||||||
}
|
}
|
||||||
|
|
||||||
const calcProgress = (status) => {
|
const calcProgress = (status: string) => {
|
||||||
let step = 100
|
let step = 100
|
||||||
const style: Record<string, unknown> = {}
|
const style: Record<string, unknown> = {}
|
||||||
style.transitionDelay = `${150 * index.value}ms`
|
style.transitionDelay = `${150 * index.value}ms`
|
||||||
@ -185,7 +185,7 @@ const calcProgress = (status) => {
|
|||||||
lineStyle.value = style
|
lineStyle.value = style
|
||||||
}
|
}
|
||||||
|
|
||||||
const updateStatus = (activeIndex) => {
|
const updateStatus = (activeIndex: number) => {
|
||||||
if (activeIndex > index.value) {
|
if (activeIndex > index.value) {
|
||||||
internalStatus.value = parent.props.finishStatus
|
internalStatus.value = parent.props.finishStatus
|
||||||
} else if (activeIndex === index.value && prevStatus.value !== 'error') {
|
} else if (activeIndex === index.value && prevStatus.value !== 'error') {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { CHANGE_EVENT } from '@element-plus/constants'
|
import { CHANGE_EVENT } from '@element-plus/constants'
|
||||||
import { buildProps, isNumber } from '@element-plus/utils'
|
import { buildProps, isNumber } from '@element-plus/utils'
|
||||||
|
import type Steps from './steps.vue'
|
||||||
import type { ExtractPropTypes } from 'vue'
|
import type { ExtractPropTypes } from 'vue'
|
||||||
|
|
||||||
export const stepsProps = buildProps({
|
export const stepsProps = buildProps({
|
||||||
@ -25,19 +25,21 @@ export const stepsProps = buildProps({
|
|||||||
},
|
},
|
||||||
finishStatus: {
|
finishStatus: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'finish',
|
|
||||||
values: ['wait', 'process', 'finish', 'error', 'success'] as const,
|
values: ['wait', 'process', 'finish', 'error', 'success'] as const,
|
||||||
|
default: 'finish',
|
||||||
},
|
},
|
||||||
processStatus: {
|
processStatus: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'process',
|
|
||||||
values: ['wait', 'process', 'finish', 'error', 'success'] as const,
|
values: ['wait', 'process', 'finish', 'error', 'success'] as const,
|
||||||
|
default: 'process',
|
||||||
},
|
},
|
||||||
} as const)
|
} as const)
|
||||||
export type StepsProps = ExtractPropTypes<typeof stepsProps>
|
export type StepsProps = ExtractPropTypes<typeof stepsProps>
|
||||||
|
|
||||||
export const stepsEmits = {
|
export const stepsEmits = {
|
||||||
[CHANGE_EVENT]: (newVal: number, oldVal: number) =>
|
[CHANGE_EVENT]: (newVal: number, oldVal: number) =>
|
||||||
isNumber(newVal) && isNumber(oldVal),
|
[newVal, oldVal].every(isNumber),
|
||||||
}
|
}
|
||||||
export type StepsEmits = typeof stepsEmits
|
export type StepsEmits = typeof stepsEmits
|
||||||
|
|
||||||
|
export type StepsInstance = InstanceType<typeof Steps>
|
||||||
|
Loading…
Reference in New Issue
Block a user