refactor(components): [steps] validate values ​​and export values (#7947)

This commit is contained in:
류한경 2022-05-30 12:57:41 +09:00 committed by GitHub
parent 7e0f6d71a5
commit 72bc196adf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 9 deletions

View File

@ -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'

View File

@ -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>

View File

@ -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') {

View File

@ -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>